【CSS】hoverで画像をスライドさせて違う画像を表示させる
CSSだけでさくっと簡単に。
hoverした時に画像をスライドさせる方法です。
html
<div class="slide-container">
<div class="slide-container-item">
<img class="slide-container__item" src="" alt="">
<img class="slide-container__item" src="" alt="">
</div>
</div>CSS
.slide-container{
position: relative;
width:382px;
height:525px;
overflow: hidden;
}
.slide-container-item{
position: absolute;
top:0;
left:0;
width: 770px;
height:525px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.slide-container-item:hover{
left:-384px;
}
.slide-container__item{
width: 382px;
height: 525px;
float: left;
}
.slide-container-item:after{
clear: both;
}解説
単純に見える枠のサイズを決めて、
hoverした時にleftをマイナスしているだけです。
レスポンシブの場合はメディアクリエでwidthを差し替えていけばよいかと思います。
imgにfloatをかけているのは、
imgタグに改行を入れているので、
そのせいで左右に余白が出てしまうのを防いでいます。
htmlのを自由に動かせる場合はfloatせずに
imgタグを1行に書けばOKです。
