CSSでimgのhoverのafterでtransitionが効かない時の対処法
created
updated
目次
CSSで、imgのhoverのafterでtransitionが効かない時があったので、その対処方法をまとめました。
styled-componentsを利用しているので、コピペでそのまま使えます。
※細かいロジックは実装してください
理想イメージ
マウスを重ねると、赤いborderと薄い赤でbackground-colorが反映されること。
原因1: imgのhoverでafterを実装している
ソースコード
const Sample1 = styled.div`
position: relative;
width: 100%;
margin: 1rem auto;
img {
position: relative;
display: block;
width: 240px;
height: 240px;
margin: auto;
box-sizing: border-box;
border: 4px solid transparent;
border-radius: 50%;
transition: 1.0s;
&:hover {
border: 4px solid red;
&:after {
position: absolute;
top: 0;
display: block;
content: '';
margin: auto;
width: 240px;
height: 240px;
border-radius: 50%;
background-color: rgba(255, 0, 0, .3);
}
}
}
`<Sample1>
<img src="/画像パス" />
</Sample1>ブラウザでの表示結果
imgタグでは、内部にコンテンツを持つことができないため、afterを実装することができません。
原因2: divのhoverにだけafterを実装している
ソースコード
const Sample2 = styled.div`
position: relative;
width: 100%;
margin: 1rem auto;
div {
width: 240px;
height: 240px;
border-radius: 50%;
margin: auto;
transition: 1.0s;
img {
position: relative;
width: 240px;
height: 240px;
margin: auto;
border-radius: 50%;
border: 4px solid transparent;
transition: 1.0s;
}
&:hover {
img {
border: 4px solid red;
}
&:after {
position: absolute;
top: 0;
display: block;
content: '';
width: 240px;
height: 240px;
border-radius: 50%;
background-color: rgba(255, 0, 0, .3);
}
}
}
`<Sample2>
<div>
<img src="/画像パス" />
</div>
</Sample2>ブラウザでの表示結果
divタグで実装する方法に修正しましたが、これではtransitionが効きません。
解決策: divの非hoverとhoverにafterを実装する
ソースコード
const Sample3 = styled.div`
position: relative;
width: 100%;
margin: 1rem auto;
div {
width: 240px;
height: 240px;
border-radius: 50%;
margin: auto;
transition: 1.0s;
img {
position: relative;
width: 240px;
height: 240px;
margin: auto;
border-radius: 50%;
border: 4px solid transparent;
transition: 1.0s;
}
&:after {
position: absolute;
top: 0;
display: block;
content: '';
width: 240px;
height: 240px;
border-radius: 50%;
transition: 1.0s;
}
&:hover {
img {
border: 4px solid red;
}
&:after {
background-color: rgba(255, 0, 0, .3);
}
}
}
`<Sample3>
<div>
<img src="/画像パス" />
</div>
</Sample3>ブラウザでの表示結果
divタグの非hoverとhoverで実装することで、transitionとafterの内容を反映させることが可能です。