【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;
}