wpX

フィルターエフェクト

HTML

  <div class="row">
    <div class="column col-xs-6"> <a href="#" class="sepia"><img src="http://gahag.net/img/201607/27s/gahag-0110156577-1.jpg">
      <p>セピア</p>
      </a> </div>
    <div class="column col-xs-6"> <a href="#" class="grayscale"><img src="http://gahag.net/img/201606/21s/gahag-0098482381-1.jpg">
      <p>グレー</p>
      </a> </div>
  </div>

CSS

/*セピア*/
.sepia img {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.sepia:hover img {
    -webkit-filter: sepia(0);
    filter: sepia(0);
}
/*グレースケール*/
.grayscale img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.grayscale:hover img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

フィルター+キャプション

HTML

  <div class="row">
    <div class="column col-md-6 filter"> <a href="#"><span class="name">Name</span> <img src="http://gahag.net/img/201607/27s/gahag-0110156577-1.jpg"> </a> </div>
    <div class="column col-md-6 caption"><a href="#"><span class="text">
    <p>Name</p>
    </span><img src="http://gahag.net/img/201607/27s/gahag-0110156577-1.jpg"></a></div>
  </div>

CSS

/*黒色フィルター + キャプション*/
.filter img{
    width:400px;
    height:300px;
}
.filter a{
    display:block;
    position: relative;
    width:400px;
    min-height:300px;
    display: flex;
    justify-content: center;
    justify-content: flex-start;
    align-items: center;
    align-items: flex-end;
}
.filter .name{
    color:#FFF;
    position: absolute;
    width: 400px;
    min-height:300px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 160%;
    font-family: bolder
}    
.filter a:before{
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.filter a:hover:before{
    background-color: rgba(0,0,0,0.0);
}
/*セピアフィルター + キャプション*/
.caption {
    position: relative;
}
.caption .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    transition: all 0.8s ease;
}
.caption .text p {
    margin: 0;
    color: white;
    font-size: 160%;
}
.caption:hover .text {
    opacity: 1;
}
.caption:hover img {
    -webkit-filter: sepia(90%);
}

ズームエフェクト

HTML

  <div class="row">
    <div class="column col-xs-6 zoomIn"> <a href="#">
      <figure><img src="http://gahag.net/img/201607/27s/gahag-0110156577-1.jpg"></figure>
      <p>ズームイン</p>
      </a> </div>
    <div class="column col-xs-6 zoomOut"> <a href="#">
      <figure><img src="http://gahag.net/img/201606/21s/gahag-0098482381-1.jpg"></figure>
      <p>ズームアウト</p>
      </a> </div>
  </div>

CSS

*ズームイン*/
.zoomIn img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.zoomIn:hover img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}
/*ズームアウト*/
.zoomOut img {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.zoomOut:hover img {
    -webkit-transform: scale(1);
    transform: scale(1);
}