News

Create CSS animated hover effects

CleverCSScode

Save space and show information on-hover stylishly with hover effects

CleverCSScode

This tutorial is going to demonstrate how to create a stylish-looking hover effect using CSS3 that will have a couple of images holding hidden information.

When the user hovers over an image, this will scale down and move over to the right or the left, revealing content behind it. The image will be clickable, but the user can choose to click through.


GET THE CODE


Get started

Open up a new HTML file in your favourite text editor and once all the meta information and link to an empty CSS file is added, we’re going to add in a couple of wrappers. The wrappers are used for positioning our content, with block being the most useful as we’ll use that to centre our hover effects.

001    <div id="page-wrapper">
002    <div class="block">
003    </div><!-- END block -->
004    </div><!-- END wrapper -->    

Left-to-right HTML

Inside our block wrapper, we can firstly add in our page title. Then we will start adding some HTML for the left-to-right hover effect. We create a div with four classes called ‘item-hover’, ‘square’,  and create an empty anchor tag at the end so we can make this clickable.

001    <h3 id="square" class="section-        heading">Hover effect</h3>
002        <!-- Left to right-->
003        <div class="item-hover square effect     left_to_right"><a href="#">
004        <!-- content goes here -->
005        </a>
006    </div><!-- END item-hover -->

Left-to-right content

Now add in some content for our left-to-right hover effect. We’re going to add an image, this can be anything you want of course, and then add some content underneath that relates to this image, which includes a heading and a short sentence.

001    <div class="img"><img src="imgs/img01.jpg" alt="img"></div>
002    <div class="info">
003    <h3>About us</h3>
004    <p>Check out all about us and how we got     started?</p>
005    </div>

Right-to-left content

This is going to be the same as the previous steps but we will add a class name right to left instead of left to right. Again think about the image and what text to add that relates to that image. The image is going to animate over to the left and it will then reveal the text.

001     <!-- Right to left-->
002        <div class="item-hover square effect     right_to_left"><a href="#">
003        <div class="img"><img src="imgs/img02.    jpg" alt="img"></div>
004        <div class="info">    
005        <h3>Our Music</h3>
006     <p>Check out our music and see if     you like it?</p>
007        </div></a>
008        </div><!-- END row -->

CSS Reset

Now create a new CSS file, call it ‘styles.css and place it in its own folder called ‘CSS’. As with most projects you start, the first piece of CSS will be a reset. We’re not going to go over the top with this one as it’s not needed., but you get the idea by looking at the CSS:

001    h1,h2,h3, body {
002        font-family: 'Source Sans Pro';
003        font-weight:300;
004    }
005    h1 { font-size: 3em; }
006    h2 { color:#2c2f36; font-size:2em; margin-    bottom: 15px; }
007    html, body {
008            width: 100%;
009    padding: 0;
010    margin: 0;
011    height: 100%;
012    min-width: 100%;
013    max-width: 100%;
014    overflow: hidden;
015    background: #868a7b;
016 }

Add wrappers

It’s common practice to add in some sort of page wrapping, and even though it’s not vital to our project, we do want to position our hover effects so that they are more central. We can achieve this by giving our main page wrapper a fixed width of 1000px and then for our block we will half that and use ‘margin: 0 auto’ to centre our content.

001   #page-wrapper {
002        width: 1000px;
003        margin: 0 auto;
004    }
005    .block {
006        width: 500px;
007        margin: 0 auto;
008    }

Page title

Then we will give our page title some styling just to give it some presentation and make it less boring. We’re going to use a Google Font here called Cabin – give it a font size of 2em and we will use the value white for the colour and make it all upper-case. By using letter spacing, we can make this a little more readable. Finish it off by positioning it using margins.

001    .section-heading {
002    font-family: 'Cabin Condensed', sans-serif;
003    font-size: 2em;
004    color: white;
005    text-transform: uppercase;
006    letter-spacing: 2px;
007    margin: 20px 0 0 40px;
008    }

Render the box model

The box-sizing property in CSS controls how the box model is handled in regards to page layout and tells the browser what the sizing properties (width and height) should include. This can be achieved through setting box-sizing to border-box. This forces the browser to render the box with the specified width and height.

001    .item-hover,
002    .item-hover * {
003        -webkit-box-sizing: border-box;
004        -moz-box-sizing: border-box;
005        box-sizing: border-box;
006        }

Create hover effects

In this step we’re just going to make sure the anchor tag doesn’t display any text decoration (underline) once hovered over. Then we will set the images to 100% of its parent element. This is just to make sure we don’t cause any issues when we need to change the image sizes.

001    .item-hover a:hover {
002    text-decoration: none;
003    }
004    .item-hover img {
006    width: 100%;
007    height: 100%;
008    }

Set the image size

The images themselves are going to be 300px square. It would be a good idea to use Photoshop to resize your images to 300 pixels first, but using CSS we can make sure that they are the right size. Then we can give them some space by setting the margin bottom and top to 40px.

001    .item-hover.square {
002        position: relative;
003        height: 300px;
004        margin: 40px 0;
005    }
006    .item-hover.square .img {
007        position: relative;
008        width: 300px;
009        height: 300px;
010    }

Image borders

In this step we are going to add on some borders to our images. We’re going to use the ‘box-shadow: inset’ property and set its width to 10px. Then using the rgba value, we can set its colour to white and its opacity to 60 per cent (0.6).

001    .item-hover.square .img:before {
002    position: absolute;
003    display: block;
004    content: '';
005    width: 100%;
006    height: 100%;
007    box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
008    }

Position the information

The information within our square images are going to be centred using absolute positioning. As we set the positioning of our images to relative in Step 10, we can achieve this easily. Then we add the property  ‘backface-visibility: hidden’ which defines whether or not an element should be visible when not facing the screen.

001    .item-hover.square .info {
002          position: absolute;
003        top: 0;
004        bottom: 0;
005        left: 0;
006      right: 0;
007        padding: 30px;
008        text-align: center;
009        -webkit-backface-visibility: hidden;
010        backface-visibility: hidden;
011     }

Style the information

Now we are going to give our information some styles. Firstly we will give it a dark background using the hex value #333. Then we will prevent all click, state and cursor options on the specified HTML element by using ‘pointer-events: none’. Then for the time being, we will set our opacity to zero so that it is hidden completely and adds a transition.

001    .item-hover.square.effect .info {
002        background: #333;
003        pointer-events: none;
004        opacity: 0;
005        -webkit-transition: all 0.35s ease-in-    out;    
006        -moz-transition: all 0.35s ease-in-out;
007        transition: all 0.35s ease-in-out;
008        }

Style the content title

With our information content added and positioned where we want it, let’s now add some styles to the content’s title. Firstly though, go back to the last step and change the opacity from zero to one. That way we can see what we are doing. Then we need to think about the size of the title, as we don’t want any part of it hidden for when we animate the image down.

001    .item-hover.square.effect .info h3 {
002    color: #fff;
003    text-transform: uppercase;
004    position: relative;
005    letter-spacing: 2px;            006    font-size: 20px;
007    margin: 10px 25px;
008    padding: 55px 0 0 0;
009    height: 110px;
010    text-shadow: 0 0 1px white, 0 1px 2px     rgba(0, 0, 0, 0.3);
011    }
012    

Style the content text

Before we can start adding any animation, we need to add some final styling to our text. Like the title, we need to squeeze this all in so when the main image gets scaled down, it doesn’t hide any of the text. Then we can separate it off by adding a white line just above it. Lastly go and change the opacity back to zero.

001    .item-hover.square.effect .info p {
002    color: #bbb;
003    padding: 10px 5px;
004    font-style: italic;
005    margin: 0px 50px;
006    font-size: 12px;
007    border-top: 1px solid rgba(255, 255, 255,     0.5);
008    }
009    

Add a transition

With all of our initial styling now complete, we can move on to the best part, which is the animation. Firstly though we will add a transition to our image with some easing applied. Also to make sure our image can now be seen, we will set its z index to 10.

001    .item-hover.square.effect .img {
002    z-index: 10;
003    -webkit-transition: all 0.35s ease-in-out;
004    -moz-transition: all 0.35s ease-in-out;
005    transition: all 0.35s ease-in-out;
006    }
007    

Left-to-right transforms

The first hover effect we will tackle is the about image. We will target the .left-to-right class and specify that the main image will start off in its original size “scale(1)”. We will then set its horizontal position to zero.
Note that in this instance, we’re only using one of the browser prefixes.

001    /* Left to right effect */
002    .item-hover.square.effect.left_to_right     .img {
003    -webkit-transform: scale(1) translateX(0);

004    transform: scale(1) translateX(0);
005    }
006    

Position the content

The first thing we are going to do is move the background information over to the left using translateX(-100%). If you set its opacity back to one again, you will see where it will be. The idea is to animate this back in once the main image has scaled down and moved over to the right.

001    ..item-hover.square.effect.left_to_right     .info {
002    -webkit-transform: translateX(-100%);
003    transform: translateX(-100%);
004    }
005    

Scale the main image

Now that the main content (info) has been positioned over to the left, we can now scale the main image down to 50 per cent of its size and move it along the x axis. This will give us this nice sweeping effect when hovered over.

001    .item-hover.square.effect.left_to_right    a:hover .img {
002        -webkit-transform: scale(0.5)         translateX(100%);
003        transform: scale(0.5) translateX(100%);
004        }
005        

Animate the content

Now we need to bring in our main content. We are going to set its opacity back to 1 so it’s fully visible and then using the translateX value, we can set its position to zero which will animate it back over to the right and position itself to where we want it.

001    .item-hover.square.effect.left_to_right     a:hover .info { 
002    opacity: 1;
003    -webkit-transform: translateX(0);
004    transform: translateX(0);
005    }    

                                

Right to left

Now we need to think about animating the Our Music image and content. It really is a case of reversing what we did in the last step with only the first rule being the same. So where there’s a negative value (-100%) we make sure it’s now a positive value. With all this added, now we can test both our hover effects.

001    .item-hover.square.effect.right_to_left     .img {
002        -webkit-transform: scale(1)         translateX(0);
003        transform: scale(1) translateX(0);
004    }
005    .item-hover.square.effect.right_to_left     .info {
006    -webkit-transform: translateX(100%);
007    transform: translateX(100%);
008    }
009    .item-hover.square.effect.right_to_left     a:hover .img {
010    -webkit-transform: scale(0.5)         translateX(-100%);
011    transform: scale(0.5) translateX(-100%);
012    }                                         013    .item-hover.square.effect.right_to_left     a:hover .info {
014    opacity: 1;
015    -webkit-transform: translateX(0);
016    transform: translateX(0);
017    }

                                    

Final thoughts

The power of CSS3 is enormous and throughout this tutorial we saw how to exploit it in a very creative way. But there is so much more we can do with CSS3 when creating hover effects that we haven’t talked about yet and we encourage you to experiment and see what new hover effects you can create.

×