HTML/CSS Tutorials

CSS3 Hover Effects

Tags: HTML/CSS

Hello guys, this time I will show you other 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;
}

1 Example

HTML

Add the special class effect to the element with the class view for this effect.

<div class="view effect">  
      <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

As we see it is very easy to create animations of really interesting, for reasons of space I have omitted the prefixes (-moz-,-webkit- etc.) but you will find all prefixes in the file.
In addition to using the border property to create a triangle, I used the multiple transitions that allows me to have more control on each property during the animation.

.effect img {
   opacity:1;
   transform:scale(1,1);
   transition: all 0.2s ease-in;
}
.effect .mask {
   opacity:0;
   overflow:visible;
   border-color:rgba(0,0,0,0.7) transparent transparent transparent;
   border-style:solid;
   border-width:150px;
   width:0;
   height:0;
   transform:translateY(-125px);
   transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}
.effect a.info {
   opacity:0;
   transform:translateY(-125px);
   transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;
}
.effect:hover img {
   opacity:0.7;
   transform:scale(2,2);
}
.effect:hover .mask {
   opacity: 1;
   transform: translateY(0px);
}
.effect:hover a.info {
   opacity:1;
   transform:translateY(100px);
}

2 Example

HTML

The syntax in this example is slightly different, always enough add special class second-effect to the class view, but we're going to include the link inside the class mask.

<div class="view second-effect">  
     <img src="images/2.jpg" />  
     <div class="mask">  
         <a href="#" class="info" title="Full Image">Full Image</a>  
     </div>  
</div>  

CSS

In this example we are going to operate on the parameters of the border property. I also implemented the box-sizing. The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements.

.second-effect .mask {
   opacity: 0;
   overflow:visible;
   border:0px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}
.second-effect a.info {
   position:relative;
   top:-10px;
   opacity:0;
   transform:scale(0,0);
   transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}
.second-effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}
.second-effect:hover a.info {
   opacity:1;
   transform:scale(1,1);
   transition-delay:0.3s;
}

3 Example

HTML

Add to the class view the special class third-effect for this effect.

<div class="view third-effect">  
     <img src="images/3.jpg" />  
     <div class="mask">  
         <a href="#" class="info" title="Full Image">Full Image</a>  
     </div>  
</div>  

CSS

As we see with very few lines of code we can get a nice effect thanks to the border property.

.third-effect .mask {
   opacity: 0;
   overflow:visible;
   border:100px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}
.third-effect a.info {
   position:relative;
   top:-10px; /* Center the link */
   opacity: 0;
   transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
   opacity:1;
   transition-delay: 0.3s;
}

4 Example

HTML

The markup in this example is reduced compared to the previous examples, but the hover effect will be very impressive.

<div class="view fourth-effect">  
    <a href="#" title="Full Image"><img src="images/4.jpg" /></a>  
    <div class="mask"></div>  
</div>  

CSS

Using only the class mask in combination with the border-radius property will really take a beautiful hover effect. I also used the visibility which allows the transition end to have the image clickable.

.fourth-effect .mask {
   position:absolute; /* Center the mask */
   top:50px;
   left:100px;
   cursor:pointer;
   border-radius: 50px;
   border-width: 50px;
   display: inline-block;
   height: 100px;
   width: 100px;
   border: 50px solid rgba(0, 0, 0, 0.7);
   box-sizing:border-box;
   opacity:1;
   visibility:visible;
   transform:scale(4);
   transition:all 0.3s ease-in-out;
}
.fourth-effect:hover .mask {
   opacity: 0;
   border:0px solid rgba(0,0,0,0.7);
   visibility:hidden;
}

5 Example

HTML

This last example has the same syntax matches the 4 example, the only difference being that one must add the class fifth-effect instead of fourth-effect.

<div class="view fifth-effect">  
    <a href="#" title="Full Image"><img src="images/5.jpg" /></a>  
    <div class="mask"></div>  
</div> 

CSS

Also here we will use the border property with the visibility property. As you can see the trick is to change the border property to be solid to double.

.fifth-effect img {
   opacity:0.2;
   transition: all 0.3s ease-in;
}
.fifth-effect .mask {
   cursor:pointer;
   opacity:1;
   visibility:visible;
   border:100px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);
}
.fifth-effect:hover .mask {
   border:0px double rgba(0,0,0,0.7);
   opacity:0;
   visibility:hidden;
}
.fifth-effect:hover img {
   opacity:1;
}

Conclusion

I hope that you liked these experiments, but above all I hope that they can inspire you for your projects. Thanks for your time.