Image Hover effect

Image Hover effect.markdown

Image Hover effect

CSS3 image hover effect for thumbnails using filters, fades, blurs etc.

Forked from Hans Engebretsen's Pen Image Hover effect.

A Pen by Ignet on CodePen.

License.

index.html

<ul class="gallery">
  <li><a href="#"><img src="http://dev.steelehouse.com/codepen/game.jpg"/><span class="name">Rexodus<span class="title">Destruction Expert</span></span></a></li>
  <li><a href="#"><img src="http://dev.steelehouse.com/codepen/hans.jpg"/><span class="name">Joe Shmoe <span class="title">Philanthrapy Expert</span></span></a></li>
    <li><a href="#"><img src="http://dev.steelehouse.com/codepen/matt.jpg"/><span class="name">Steve Snyder <span class="title">Beard Extrodinarre</span></span></a></li>
</ul>

style.css

@import "compass/css3";

@import "compass";
@import "compass/reset";
@import "compass/css3";
body {
   color:white;
  font-family:'helvetica-nue', helvetica, arial, sans-serif;
}
.gallery {
  margin:0 auto;
  text-align:center;
  width:100%;
  padding:20px;
  li {
    width:421px;
    min-height:100%;
    text-align:center;
    height:255px;
    position:relative;
    margin:0 auto;
    display:inline-block;
    overflow:hidden;
    background-color:black;
    &:nth-child(2) img{
      margin:0;
     display:inline-block;
      float:right;
    }
    .name {
      text-decoration:none;
      text-transform:uppercase;
      @include text-shadow(rgba(black,.7) 1px 1px 5px);
      color:white;
      font-weight:lighter;
      font-size:20px;
      letter-spacing:.1em;
      position:absolute;
      display:block;
      top:40%;
      left:0;
      text-align:center;
      @include opacity(0);
      z-index:2;
      width:100%;
      height:100%;
        .title {
        display:block;
        text-transform:none;
        font-style:italic;
        font-size:80%;
        color:rgba(white, .7);
        @include opacity(0);
        @include transition-property(all);
        @include transition-delay(.2s);
        @include transition-duration(.9s);
        }
      }
      &:hover {
         .name {
           @include opacity(1);
           @include scale(1);
           @include transition-property(all);
           @include transition-duration(.6s); 
          }
          .title {
            @include opacity(1);
           }
          img {
            @include scale(1.0);
            background-position:top top;
            @include filter(grayscale(.4) blur(2px));
            @include transition-property(all);
            @include transition-duration(.8s);  
            } 
            &:hover img {
              @include opacity(.5);
             }
      }
      img { 
        display:block;
        width:421px;
        margin:0 auto;
          display:inline-block;
      text-align:center;
      @include scale(1.09);
      @include transition-property(all);
            @include transition-duration(.4s); 
      }
   }
}