hoverで画像を変えよう
問題
今回はhoverによって画像が切り替わるアニメーションを作って行きたいと思います。画像は何を使ってもらっても構わないのですが、一応デモで使っている画像のurlを記載しておきます。
通常時:https://ninjacode.work/assets/img/top/logo.png
hover時:https://ninjacode.work/assets/img/top/logo_red.png
通常時:https://ninjacode.work/assets/img/top/logo.png
hover時:https://ninjacode.work/assets/img/top/logo_red.png
自分の環境に書くコード
<div class="frame">
<div class="image"></div>
</div>
¥HTML¥
.frame{
width: 400px;
height: 274px;
border: 10px solid burlywood;
}
.image{
width: inherit;
height: inherit;
box-shadow: 0 0 20px #bbbbbb inset;
}
¥CSS¥
期待する画面
解答ソースコード
.image{
background-image: url(https://urbanlife.tokyo/wp-content/uploads/2019/06/190616_irasuto_01.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.image:hover{
background-image: url(https://www.724685.com/images/site/20190401-02.png);
}
¥CSS¥
完了にする!
解説