5 CSS Hover Effects you will love to use

Hover effects applied on images are one of the latest and coolest trends in web design. A few days back, I have shared some simple image hover effects which were really easy to create and understand. Today, I have been a little more creative and come up with 5 super cool image hover effects, again with pure CSS. And if you like these, feel free to grab the codes and implement it in your projects.
First of all, let’s have a look what we are going to create.

CSS Hover Effects Samples

All the files along with photographs are available in a zip folder for free download at the end of this tutorial. So, don’t worry and let’s concentrate here on learning how to create these CSS hover effects.

Before we start, I will again tell you that for achieving these hover effects; we will use a few CSS3 properties. Since all the properties of CSS3 are not supported by Internet Explorer 9 and earlier; these hover effects will not work there. However, the incompatibility with older browsers should not stop you from implementation as these effects will downgrade nicely. With all the latest web browsers; these effects should work like a charm!

For most of the examples, I have used a parent container and put one image and one more optional container for text inside it. First, have a look at our parent container class which I have named as ‘holder’:

CSS

.holder
{
    border: 6px solid #FFFFFF;
    float: left;
    margin: 20px;
    position: relative;   
    overflow: hidden;
    box-shadow: 0px 0px 5px #333333;   
    transition: 0.5s Ease;   
}

There is nothing special in the parent block. I have set default transition time to 0.5 seconds in all these effects. I have removed the vendor prefixes from the CSS3.0 codes displayed here for simplicity. However, you should always use vendor prefixes for better compatibility. You will find vendor prefixes included in the original files which are available for download below.

Caption with Light

Our first CSS hover effect is ‘Caption with Light’. Here on mouse rollover, we are showing the caption of the image which enters smoothly from top. At the same time, we are changing the shadow-color to create an effect of light coming out from behind the image.

caption-and-light

CSS

.caption
{   
    color: rgba(0,0,0,0);   
    line-height: 50px;
}
.caption:hover
{
    border: 6px solid #E0E0E0;
    color: rgb(255,255,255);
    line-height: 500px;
    box-shadow: 0px 0px 10px 7px #FFFFFF;   
}
.caption > div
{
    position: absolute;
    top: 0px;
    left: 50px;
    font-size: 30px;
}

HTML

    <div>
        <img src="Images/css-effects/5.jpg" alt="Web Tutorial Plus - Demo" />
        <div>
            YOUR CAPTION HERE</div>
    </div>

As you can see, I have used the line-height property along with rgba for getting the effect of Text entering from top. Initially, the text color is fully transparent with zero alpha value in rgba. On mouse hover, this value changes to one, making it fully opaque. The line-height property is changed which along with transition gives the look of text entering from top.

For creating light effect, we have changed the box-shadow property.

Smooth Caption

The purpose of this hover effect is similar to the first one. However, in this case, initially the image is partly transparent with opacity set to 0.6. On hover, the image becomes fully transparent and a text box appears with heading and description. This creates a smooth and sleek hover effect.

smooth-caption

CSS

.smooth
{
    opacity: 1;   
}
.smooth:hover
{
    opacity: 0.6;
    box-shadow: 0px 0px 10px #333333;
}
.go-left
{
    background-color: rgba(0,0,0,0.5);
    color: #FFFFFF;
    position: absolute;
    bottom: 0px;
    right: -600px;
    width: 360px;
    text-align:center;  
    font-size: 20px;
    margin: 10px;
    padding: 10px;   
    transition: 0.5s Ease;
}
.smooth:hover > .go-left
{   
    right:0px;   
}

HTML

<div>
        <img src="Images/css-effects/1.jpg" alt="Web Tutorial Plus - Demo" />
        <div>
            Image Description
        </div>
</div>

In the example above, we have initially kept the text 600px in right direction away from the left side of the image (right: -600px) which is outside the parent block. Since we have declared “overflow:hidden”; the text is invisible. On hover, the ‘right’ value is changed to zero, which along with transition creates the effect of text entering from right direction.

In this hover effect, we can set the direction, position and content of the text box easily. Here is the second example of the same effect where the text appears from bottom and contains the heading along with description also.

CSS

.go-top
{
    background-color: rgba(0,0,0,0.5);
    color: #FFFFFF;
    position: absolute;
    bottom: 0px;
    top: 600px;
    width: 360px;
    text-align:center;  
    font-size: 20px;
    margin: 10px;
    padding: 10px;   
    transition: 0.5s Ease;
}
.smooth:hover > .go-top
{   
    top:0px;   
}
.go-top p
{
    font-size: 12px;
}

HTML

  <div>
        <img src="Images/css-effects/1.jpg" alt="Web Tutorial Plus - Demo" />
        <div>
            Image Description
            <p>
                This is the description of this image. You may use hyperlinks also. Web Tutorial Plus offers free tutorial on website building and design. It also offers the tutorial on advanced excel. You also get 'best designed websites' on weekly basis for inspiration.
            </p>
        </div>
    </div>

There is no big change in the code here. Instead of ‘right’ property; here we are using the ‘top’ property. The text-box has a semi-transparent background which gives a sleek and professional look.

Details on Card

In earlier examples, we were displaying the information on the image itself. Here, we will display the image inside a card with description written just below it. This CSS hover effect looks much better in a group of photographs. This will be particularly useful in cases where you don’t want to disturb the image while displaying the description.

details-on-card

CSS

.details-holder
{
    float: left;
    position: relative;
    margin: 20px 5px 120px 5px;
}
.show-details img
{
    opacity: 0.5;
    width: 200px;
    height: 150px;
}
.show-details:hover img
{
    position: relative;
    opacity: 1;
    z-index: 99;   
}
.img-info
{
    padding: 170px 10px 0px 10px;
    position: absolute;
    z-index: 20;
    top: -10px;
    left: -10px;
    width: 200px;
    height: 100px;   
    background-color: #888888;
    color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0px 8px 5px -6px #333333;   
    transition: 0.5s Ease;
    opacity: 0;   
}
.show-details:hover .img-info
{
    opacity:1;   
}
.details-holder h1
{
    font-size: 18px;
    text-transform: uppercase;   
}
.details-holder p
{
    font-size: 12px;
}

HTML

   <div>
        <img src="Images/css-effects/5.jpg" alt="Web Tutorial Plus - Demo" />
        <div>
            <h1>
                Heading</h1>
            <p>
                You can write the description about this image here.</p>
        </div>
    </div>

Whew, A long CSS code! However, if you go through the code line by line, it will be really easy to understand it. In ‘detail-holder’ class, we are setting the bottom margin to 120px for creating a room for displaying the image-description. We are then defining the initial width, height and transparency of the image. This on mouse hover, comes to the top of other blocks with z-index defined as 99 (position declaration is required whenever we use z-index property).

In ‘img-info’ class, there are several things to watch for. First, see the padding – 170px from top. This is more than the defined width of image to ensure that the text appears below it. We are defining top and left properties to -10 to introduce a space of 10px in both left and top. Since, our padding for left and right is set to 10px; the overall width of this block becomes 200px + 10px + 10px; i.e. 220px. Also note here the box-shadow property – it creates a small shadow only at the bottom. And with opacity set to zero, initially this block is fully transparent but at hover, it becomes totally opaque.

The result is an awesome card with both image and its description on it.

Curtains

Now let’s do little more innovative things. Here, I have created image hover effect with another image. The other image is a pattern, which acts as a transparent curtain. Once you rollover your mouse, the curtains lifts up and the main image is displayed. Real cool, isn’t it?

curtains

CSS

.curtain
{
    background-image: url('../Images/retina_wood.png');
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    opacity: 0.8;
    z-index: 15;
    transition: 0.5s Ease;
}
.gallery:hover .curtain
{
    height: 0;
}

HTML

    <div>
        <img src="Images/css-effects/1.jpg" alt="Web Tutorial Plus - Demo" />
        <div>
        </div>
    </div>

If you look at the CSS code for the ‘curtain class’, you will find that it is very similar to what we have already created in our second example. Instead of background color, we are using a background-image with initial opacity set to 0.8. On mouse rollover, the height which is initially defined as 100% becomes zero. It gives the effect of the curtains going up. Simple and beautiful!

Roller

Now, this is out of the box as it sets the ball rolling! This is a little bit tricky and experimental but really easy to understand and implement. First let’s have a look at the CSS and HTML codes.

rolling-effect

CSS

.roller
{
    width: 850px;
    height: 200px;
}
.roller img
{
    float: left;
    border-radius: 50%;
    width: 200px;
    height: 200px;   
    transition: 1s Ease;
}
.roller:hover img
{
    transform: translate(630px, 0px) rotate(360deg);
}

HTML

    <div>
        <img src="Images/css-effects/roll-ball.png" alt="Football" />
    </div>

Here we are using a different parent class – roller, to define the width and height. Look at the width; it is set to 850px to give the room for ball to roll.

For the image, we are setting the border-radius to 50% which makes the image round and the transition time of 1 second. The rolling effect is achieved by transform property where we are defining both translate and rotate values. Ball takes one complete rotation as the rotate value is 360deg here and we are translating it by 630px equal to the perimeter of the circle. Precisely it will be Diameter*PI, which comes out to be 628.32px. We have defined the width of the parent container as 850px which is nothing but the sum of image diameter (200px) and its travel path (630px).

Conclusion

As you can see, with a little bit creativity, amazing CSS hover effects can be achieved. I am sure, you will like these examples. The complete package is available here in case you want to download it.

Download all files and images (zipped)

Feel free to use the CSS codes in your existing or upcoming projects. And don’t forget to link back to this article if you find it useful. It’s your turn now – learn, experiment and create. And let me know in the comments section below, how you find these CSS hover effects.

Tagged on: ,

15 thoughts on “5 CSS Hover Effects you will love to use

  1. Dave Kinsella

    In the Smooth Caption example, it would be better if the image was initially fully opaque and then became slightly transparent on hover to make the text more easily distinguishable.

    Not a criticism of the technique, just a UX idea.

  2. Pingback: CkFdez – 5 efectos ‘rollovers’ en CSS

  3. Pingback: 20 Scripts CSS3 para crear el Efecto Image Hover - Fantastithus.com

  4. Pingback: 30+ Hot CSS3 Image Hover Scripts

  5. Kriszta

    I have been reading your article and all the effects look fantastic. I have one little problem, that I still dont know how to use it. I am a startup wordpress editor, I just do it as a hobby.
    I would like to insert this into my page, but please please help!
    I insert the css into the css sheet in wordpress, and then what do I write into the page where I would like to display my picture from the media library??
    Help would be great, I have already spent days on figuring out how to do it.

    Thanks a lot for sharing!

    1. Gunjesh Kumar Post author

      Hi Kriszta,
      For implementing the CSS effects, you need to go to the “text” tab in “Add new Post”.
      After inserting the picture from media library, you can define the CSS class in the “text” tab manually.
      Then, in the CSS sheet in wordpress, you can define the style for this CSS class.
      If you do everything properly, it should work without a problem.

  6. Jochem

    Awesome stuff! I used the go-top effect! It seems like it’s working everywhere, cross browser, except for (possibly older) iPhones! I read something about adding some CSS (translate3d or transform3d?) but I wouldnt really know how to use this in these examples..

    Does anyone know how to make this work?
    Cheers!
    Jochem

  7. Pingback: Free CSS3 Hover Effects to Copy and Paste - Template Monster Blog

  8. Pingback: Ücretsiz CSS3 Hover Etkileri | templatemonsterturkey.com

Leave a Reply