hover時に背景がはみ出ずにズームするボックスの上に、擬似要素で入れた画像をボックスから常にはみ出させた状態で表示したい。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
ボックスの背景がoverflow:hiddenの状態でhover時にズームしつつ、擬似要素に入れた飾り文字（img）を常時はみ出させた状態で表示したい。

発生している問題・エラーメッセージ

飾り文字が見切れてしまう。

該当のソースコード

.bnr .inner h3 a::after{
content: '';
position: absolute;
width: 400px;
height: 100px;
background: url("https://drive.google.com/uc?export=view&id=1bh_mHOQWdmCg9cL42hC6tO1tXQEo7yOE") no-repeat 50% / cover;
right: -90px;
bottom: -10px;
transform: rotate(-15deg);
}

css

### 試したこと
overflow:hiddenの位置を変えて試してみましたが、うまくいきませんでした。
初心者なので至らないコード申し訳ないですが、調べても良い案が見つからないので、ご教授いただければ幸いです。よろしくお願いいたします。

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
・html
<div class="bnr">
<div class="inner">
<h3><a href="#">hover時backgroundがズームに</a></h3>
<p class="txt mincho">外の飾りテキストははみ出る仕様</p>
</div>
</div>

・css
.bnr {
  width: 1200px;
  background: #eee;
  padding: 50px;
}

.bnr .inner{
  position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 600px;
    height: 230px;
    overflow: hidden;
    text-align: center;
    border: 2px solid navy;
    margin: 0 auto;
}

.bnr .inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("https://drive.google.com/uc?export=view&id=1hqKY18eiablYr1D6a5AwgFdHiAOgHa5B") no-repeat 50% 0%;
    transition: all .8s ease;
}

.bnr .inner:hover::before{
    transform: scale(1.3);
}

.bnr .inner h3, .bnr .inner p.txt {
  z-index:1;
}

.bnr .inner h3 a{
  color: #000;
  text-decoration: none;
}
.bnr .inner h3 a::after{
    content: '';
    position: absolute;
    width: 400px;
    height: 100px;
    background: url("https://drive.google.com/uc?export=view&id=1bh_mHOQWdmCg9cL42hC6tO1tXQEo7yOE") no-repeat 50% / cover;
    right: -90px;
    bottom: -10px;
  transform: rotate(-15deg);
}

---
[codepenサンプル](https://codepen.io/pinkycross/pen/GRjPbvj)

行動規範の内容に同意します

回答1件

ベストアンサー

.inner に overflow:hidden が設定されているので、.innerの内側に飾り文字（img）を入れたら見切れてしまいます。

.innerの外側のブロック、つまり、.bnr に飾り文字を設定すればいいでしょう。位置は上下左右を%で中央寄せしてtransform: translate()で微調整するとうまくいきます。

css
1.bnr {
2  position:relative; /* 追加 */
3}
4.bnr::after{  /* 修正 */
5    content: '';
6    position: absolute;
7    width: 400px;
8    height: 100px;
9    background: url("https://drive.google.com/uc?export=view&id=1bh_mHOQWdmCg9cL42hC6tO1tXQEo7yOE") no-repeat 50% / cover;
10  left: 50%; /* 修正 */
11  bottom: 50%; /* 修正 */
12  transform: translate(-5px, 120px) rotate(-15deg); /* 修正 */
13}

CodePenサンプル

別案

背景画像を疑似要素ではなく.innerに直接設定して、ホバー時のズームは background-size で拡大させれば、よりシンプルに実装できますね。

css
1.bnr .inner{
2  position: relative;
3    display: flex;
4    justify-content: center;
5    flex-direction: column;
6    width: 600px;
7    height: 230px;
8 /*   overflow: hidden;*/
9    text-align: center;
10    border: 2px solid navy;
11    margin: 0 auto;
12    background: url("https://drive.google.com/uc?export=view&id=1hqKY18eiablYr1D6a5AwgFdHiAOgHa5B") no-repeat 50% 0%;
13    background-size: 180%;
14    transition: all .8s ease;}
15
16.bnr .inner:hover {
17    background-size: 230%;
18}