<!--
   Title: Image hover effects
   Description: Simple css image hover effects
   Author: Pawel Galias
   Author URI: http://pawgalias.eu
-->

<h1>Image hover effects</h1>

<div class="flexbox">

  <div>
    <h2>No effect</h2>
    <div class="hover">
      <img src="http://lorempixel.com/400/200/sports/" />
    </div>
    <div class="clearer"></div>
  </div>

</div>

<div class="flexbox">

  <div>
    <h2>1# Zoom01 effect</h2>
    <div class="hover zoom01">
      <img src="http://lorempixel.com/400/200/abstract/" />
    </div>
  </div>

  <div>
    <h2>2# Zoom02 effect</h2>
    <div class="hover zoom02">
      <img src="http://lorempixel.com/400/200/abstract/" />
    </div>
  </div>

</div>

<div class="flexbox">

  <div>
    <h2>3# Slide right effect</h2>
    <div class="hover slide01">
      <img src="http://lorempixel.com/400/200/cats/" />
    </div>
  </div>

  <div>
    <h2>4# Slide down effect</h2>
    <div class="hover slide02">
      <img src="http://lorempixel.com/200/400/cats/" />
    </div>
  </div>

  <div>
    <h2>5# Slide up effect</h2>
    <div class="hover slide03">
      <img src="http://lorempixel.com/400/400/cats/" />
    </div>
  </div>

  <div>
    <h2>6# Slide left effect</h2>
    <div class="hover slide04">
      <img src="http://lorempixel.com/400/600/cats/" />
    </div>
  </div>

</div>

<div class="flexbox">

  <div>
    <h2>7# Shrink01 effect</h2>
    <div class="hover shrink01">
      <img src="http://lorempixel.com/800/600/food/" />
    </div>
  </div>

  <div>
    <h2>8# Shrink02 effect</h2>
    <div class="hover shrink02">
      <img src="http://lorempixel.com/600/400/food/" />
    </div>
  </div>

</div>

<div class="flexbox">

  <div>
    <h2>9# Rotate effect</h2>
    <div class="hover rotate01">
      <img src="http://lorempixel.com/400/400/transport/" />
    </div>
  </div>

  <div>
    <h2>10# Rotate+shrink effect</h2>
    <div class="hover rotate02">
      <img src="http://lorempixel.com/450/250/transport/" />
    </div>
  </div>

  <div>
    <h2>11# Morph effect</h2>
    <div class="hover rotate03">
      <img src="http://lorempixel.com/500/300/transport/" />
    </div>
  </div>

  <div>
    <h2>12# Tilt effect</h2>
    <div class="hover rotate04">
      <img src="http://lorempixel.com/450/300/transport/" />
    </div>
  </div>

  <div>
    <h2>13# Rotation + shrink effect</h2>
    <div class="hover rotate05">
      <img src="http://lorempixel.com/650/300/transport/" />
    </div>
  </div>

</div>

<div class="flexbox">

  <div>
    <h2>14# Blur effect</h2>
    <div class="hover filter01">
      <img src="http://lorempixel.com/400/200/city/" />
    </div>
  </div>

  <div>
    <h2>15# B&W effect</h2>
    <div class="hover filter02">
      <img src="http://lorempixel.com/500/300/city/" />
    </div>
  </div>

  <div>
    <h2>16# Brightness effect</h2>
    <div class="hover filter03">
      <img src="http://lorempixel.com/600/400/city/" />
    </div>
  </div>

  <div>
    <h2>17# Sepia effect</h2>
    <div class="hover filter04">
      <img src="http://lorempixel.com/450/300/city/" />
    </div>
  </div>

  <div>
    <h2>18# Saturate effect</h2>
    <div class="hover filter05">
      <img src="http://lorempixel.com/550/250/city/" />
    </div>
  </div>

  <div>
    <h2>19# Invert effect</h2>
    <div class="hover filter06">
      <img src="http://lorempixel.com/550/250/city/" />
    </div>
  </div>

  <div>
    <h2>20# B&W + Blur effect</h2>
    <div class="hover filter07">
      <img src="http://lorempixel.com/400/200/city/" />
    </div>
  </div>

</div>

<div class="flexbox">

  <div>
    <h2>21# Opacity01 effect</h2>
    <div class="hover opacity01">
      <img src="http://lorempixel.com/550/250/animals/" />
    </div>
  </div>

  <div>
    <h2>22# Opacity02 effect</h2>
    <div class="hover opacity02">
      <img src="http://lorempixel.com/400/200/animals/" />
    </div>
  </div>

</div>

<div class="flexbox">

  <div>
    <h2>23# Blink effect</h2>
    <div class="hover animate01">
      <img src="http://lorempixel.com/400/200/business/" />
    </div>
  </div>

  <div>
    <h2>24# Jump effect</h2>
    <div class="hover animate02">
      <img src="http://lorempixel.com/500/250/business/" />
    </div>
  </div>

  <div>
    <h2>25# Pulse effect</h2>
    <div class="hover animate03">
      <img src="http://lorempixel.com/500/250/abstract/" />
    </div>
  </div>
  
  <div>
    <h2>26# Wave effect</h2>
    <div class="hover animate04">
      <img src="http://lorempixel.com/300/300/cats" />
    </div>
  </div>
  
  <div>
    <h2>27# Round wave effect</h2>
    <div class="hover animate05">
      <img src="http://lorempixel.com/300/300/animals" />
    </div>
  </div>

</div>

/*
   Title: Image hover effects
   Description: Simple css image hover effects
   Author: Pawel Galias
   Author URI: http://pawgalias.eu
*/

h2 {
  margin-top: 50px;
  margin-bottom: 10px;
}

img {
  margin-bottom: -4px;
}

.flexbox {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.hover {
  border: 4px solid #000;
  // size of image
  width: 200px;
  height: 200px;
  overflow: hidden;
  float: left;
  -webkit-box-shadow: 0 0 20px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0 0 20px 5px rgba(0,0,0,0.75);
box-shadow: 0 0 20px 5px rgba(0,0,0,0.75);
}

// transition mixin
.transition(@transition: all .5s ease) {
  -webkit-transition: @transition;
          transition: @transition;
}

// tranform mixin
.transform(@transform) {
  -webkit-transform: @transform;
      -ms-transform: @transform;
          transform: @transform;
}

.filter(@filter) {
  -webkit-filter: @filter;
          filter: @filter;
}

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}

// 1# effect
.zoom01 {
  img {
    .transition;
    &:hover {
      .transform(scale(1.3));
    }
  }
}

// 2# effect
.zoom02 {
  img {
    width: 200%;
    height: auto;
    .transition;
    &:hover {
      width: 300%;
    }
  }
}

// 3# effect
.slide01 {
  img {
    margin-left: 0;
    .transition(margin .7s cubic-bezier(0, 1.65, 1, -.6));
    &:hover {
      margin-left: -200px;
    }
  }
}

// 4# effect
.slide02 {
  img {
    margin-top: 0;
    .transition(margin .7s ease);
    &:hover {
      margin-top: -200px;
    }
  }
}

// 5# effect
.slide03 {
  img {
    margin-top: -200px;
    .transition(margin .7s ease);
    &:hover {
      margin-top: 0;
    }
  }
}

// 6# effect
.slide04 {
  img {
    margin-left: -200px;
    .transition(margin .7s ease);
    &:hover {
      margin-left: 0;
    }
  }
}

// 7# effect
.shrink01 {
  img {
    .transform(scale(1.5));
    .transition;
    &:hover {
      .transform(scale(1));
    }
  }
}

// 8# effect
.shrink02 {
  img {
    width: 600px;
    height: auto;
    .transition;
    &:hover {
      width: 400px;
    }
  }
}

// 9# effect
.rotate01 {
  position: relative;
  img {
    position: absolute;
    top: -50%;
    left: -50%;
    .transform(rotate(15deg));
    .transition;
    &:hover {
      .transform(rotate(0deg));
    }
  }
}

// 10# effect
.rotate02 {
  img {
    .transform(rotate(30deg) scale(2));
    .transition;
    &:hover {
      .transform(rotate(0deg) scale(1));
    }
  }
}

// 11# effect
.rotate03 {
  .transition;
  &:hover {
    border-radius: 50%;
  }
}

// 12# effect
.rotate04 {
  .transition;
  &:hover {
    .transform(rotate(10deg));
  }
}

// 13# effect
.rotate05 {
  .transition(all 1s ease);
  &:hover {
    .transform(rotate(720deg) scale(0.5));
  }
}

// 14# effect
.filter01 {
  img {
    .transition;
    .filter(blur(3px));
    &:hover {
      .filter(blur(0));
    }
  }
}

// 15# effect
.filter02 {
  img {
    .transition;
    .filter(grayscale(100%));
    &:hover {
      .filter(grayscale(0));
    }
  }
}

// 16# effect
.filter03 {
  img {
    .transition;
    .filter(brightness(3));
    &:hover {
      .filter(brightness(1));
    }
  }
}

// 17# effect
.filter04 {
  img {
    .transition;
    .filter(sepia(100%));
    &:hover {
      .filter(sepia(0));
    }
  }
}

// 18# effect
.filter05 {
  img {
    .transition;
    .filter(saturate(10));
    &:hover {
      .filter(saturate(0));
    }
  }
}

// 19# effect
.filter06 {
  img {
    .transition;
    .filter(invert(1));
    &:hover {
      .filter(invert(0));
    }
  }
}

// 20# effect
.filter07 {
  img {
    .transition;
    .filter(blur(10px) grayscale(1));
    &:hover {
      .filter(blur(0) grayscale(0));
    }
  }
}

// 21# effect
.opacity01 {
  img {
    .transition;
    opacity: 1;
    &:hover {
      opacity: 0.4;
    }
  }
}

// 22# effect
.opacity02 {
  background: #534f34;
  img {
    .transition;
    opacity: 1;
    &:hover {
      opacity: 0.4;
    }
  }
}

// 23# effect
@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animate01 {
  img {
    &:hover {
      .animation(blink .5s);
    }
  }
}

// 24# effect
@keyframes jump {
  0%   {bottom: 0}
  50%  {bottom: 20px}
  100% {bottom: 0}
}
.animate02 {
  position: relative;
  &:hover {
    .animation(jump .5s);
  }
}

// 25# effect
@keyframes pulse {
  0%   {.transform(scale(1.1));}
  50%  {.transform(scale(0.8));}
  90%  {.transform(scale(1));}
  100% {.transform(scale(1));}
}
.animate03 {
  &:hover {
    .animation(pulse 1s infinite);
  }
}

// 26# effect
@keyframes wave {
  100% {left: -75%}
}
.animate04 {
  position: relative;
  &::after {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 175%;
    z-index: 999;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	  .transform(skewX(25deg));
    display: block;
    content: '';
  }
  &:hover::after {
    .animation(wave .75s);
  }
}

//27# effect
@keyframes round-wave {
  0%   {opacity:1;}
  50%  {opacity:1;}
  100% {opacity:0;width:200%;height:200%;}
}
.animate05 {
  position: relative;
  &::after {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    .transform(translate(-50%,-50%));
    background: rgba(255,255,255,.3);
    width: 0;
    height: 0;
    border-radius: 50%;
  }
  &:hover::after {
    .animation(round-wave .5s);
  }
}