7 Simple Image Hover Effects You Can Use using CSS

 

Effect #1. Grow

HTML Codes
<div class="grow pic">
  <img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>


CSS Codes
.grow img {
  height: 300px;
  width: 300px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.grow img:hover {
  width: 400px;
  height: 400px;
}

 

 

Effect #2. Shrink

HTML Codes
<div class="shrink pic">
  <img src="http://lorempixel.com/400/400/nightlife/4" alt="city">
</div>

CSS Codes
/*SHRINK*/
.shrink img {
  height: 400px;
  width: 400px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.shrink img:hover {
  width: 300px;
  height: 300px;
}

 

 

Effect #3. Horizontal Pan

HTML Codes
<div class="sidepan pic">
  <img src="http://lorempixel.com/600/300/sports/8" alt="kick">
</div>

CSS Codes
/*SIDEPAN*/
.sidepan img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

.sidepan img:hover {
  margin-left: -200px;
}

 

 

Effect #4. Vertical Pan

HTML Codes
<div class="vertpan pic">
  <img src="http://lorempixel.com/300/600/sports/5" alt="climb">
</div>

CSS Codes
/*VERTPAN*/
.vertpan img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

.vertpan img:hover {
  margin-top: -200px;
}

 

 

Effect #5. Tilt

HTML Codes
<div class="tilt pic">
  <img src="http://lorempixel.com/300/300/transport/5" alt="car">
</div>

CSS Codes
/*TILT*/
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

 

 

Effect #6. Blur

HTML Codes
<div class="blur pic">
  <img src="http://lorempixel.com/300/300/transport/2" alt="plane">
</div>

CSS Codes
/*BLUR*/
.blur img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.blur img:hover {
  -webkit-filter: blur(5px);
}

 

 

Effect #7. Black and White

HTML Codes
<div class="bw pic">
  <img src="http://lorempixel.com/300/300/nature/2" alt="sea">
</div>

CSS Codes
/*B&W*/
.bw {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.bw:hover {
  -webkit-filter: grayscale(100%);
}