【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です。