There are five examples of hover effects using different CSS properties compared to the old tutorial posted on Codrops. In summary, we seek the same method but we will act especially using the border property, as we shall see later that allows us to create very particular effects. Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

HTML Markup

This simple structure allows us to make these effects. As you can see in the code below we create a parent class view, and the contents inside. Then we create a class mask where we apply CSS3 transitions to get the hover effect. In later examples, this syntax could change slightly depending on the effect you want to apply.

<div class="view">  
      <img src="images/1.jpg" />  
      <div class="mask"></div>  
      <div class="content">  
           <a href="#" class="info" title="Full Image">Full Image</a>  
      </div>  
</div>  

CSS

Here you will set the basic properties of our tutorial. For every effect there will be a different CSS file, you can incorporate the various effect into one CSS file.

.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}
.view .mask, .view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view a.info {
   background:url(../img/link.png) center no-repeat;
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-indent:-9999px;
   width:20px;
   height:20px;
}

Read more:http://www.alessioatzeni.com/blog/css3-hover-effects/