Create modern CSS3 hover effects

A CSS transition gives us the ability to animate changes to a CSS property value. This can be used to smoothly change a value, and by using transition delays we can cue the transition of elements. A CSS transform allows us to transform elements in two or three dimensional space. In this tutorial, we will be using 2D transformations.

Step 1 – creating the base HTML

The first step is to create a simple HTML base.

1. <div class="block_holder">
2. <div class="block">
3. <img src="250.jpg" />
4. <div class="hover_info">
5. </div>
6. </div>
7. </div>

With this we have built a holder for our block. The block contains our image and a hover_info div which, as the name suggests, will contain the information we want to display on hover.

Step 2 – creating the base CSS

The next step is to create the CSS to style the base and create the first transition. For ease of readability, this tutorial will be written without prefixes.

1. .block_holder {
2. padding: 7px;
3. background: #f6f6f6;
4. width: 350px;
5. height: 250px;
6. box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.15);
7. float: left;
8. margin: 15px;
9. }
10. .block {
11. width: 350px;
12. height: 250px;
13. position: relative;
14. overflow: hidden;
15. }
16. .hover_info {
17. width: 350px;
18. height: 250px;
19. position: absolute;
20. top: 0;
21. left: 0;
22. background: rgba(0, 0, 0, 0.8);
23. width: 100%;
24. height: 100%;
25. position: absolute;
26. left: -86%;
27. top: -19%;
28. transition: all 200ms linear;
29. transform: rotate(90deg);
30. }

After adding this CSS we now have a block holding an image and a div called hover_info. In this CSS we have added some basic styling to our block_holder and block. We added a background with an opacity of 80% to the hover_info div, used absolute positioning to place the div away from the block, and used overflow hidden on the block to ensure it doesn’t appear.

We have then used the CSS transition property, which allows us to specify the elements to which we would like to apply a transition. For this element we have used all, so the transition is applied to all elements where a value is changed. We have set a duration of 200ms - this is how long all changed elements will take to transition. Finally, we have used linear as our timing function, which means our transition will have a constant speed from start to end. We then use transform to rotate the div 90 degrees.

The final bit of code for this step is to set our CSS to be used on hover of the block.

1. .block:hover .hover_info {
2. top: 0;
3. left: 0;
4. transform: rotate(0deg);
5. }

In this CSS we are changing the top, left and transform properties of the hover_info div on hover of the block. This will animate the div to being overlaid on top of the image. On hover, the overlaid div should rotate into place, as seen in this demo.

Step 3 – adding the final HTML

Now that we have a base with an initial hover transition we will add content to the hover_info div, in the form of a title, paragraph and link.

1. <div class="block_holder">
2. <div class="block">
3. <img src="250.jpg" />
4. <div class="hover_info">
5. <h1>Article Title</h1>
6. <p>Lorem ipsum dolor. Aenean scelerisque odio ut dui feugiat commodo. Nulla blandit erat vel nisi consectetur ac pharetra augue consectetur.</p>
7. <a href="#">Read more</a>
8. </div>
9. </div>
10. </div>

Step 4 – adding the final CSS

Now that we have the HTML, we will add styling to all of our elements.

1. .hover_info h1 {
2. font-size: 2em;
3. padding: 10px 20px;
4. background: rgba(207, 138, 5, 0.7);
5. color: #E7E7E7;
6. position: absolute;
7. top: 25px;
8. left: -100%;
9. transition: left 200ms linear;
10. }
11. .hover_info:hover h1 {
12. left: 0;
13. transition-delay: 200ms;
14. }

We have positioned the H1 25px from the top and initially 100% left to ensure that it's hidden at the start. On hover we change the left position to 0 so the H1 slides in from the left. We use the transition-delay property on hover with a setting of 200ms so it happens after the initial transition of the overlay.

We have applied this on the hover class and not the initial class so it only applies when a user initially hovers over the area. When the mouse is moved off the area the delay isn’t applied and the transition happens instantly.

1. .hover_info p {
2. font-size: 1.5em;
3. line-height: 1.4;
4. color: #fff;
5. position: absolute;
6. top: 85px;
7. left: 10%;
8. width: 80%;
9. text-align: center;
10. opacity: 0;
11. transition: opacity 200ms linear;
12. }
13. .hover_info:hover p {
14. opacity: 1;
15. transition-delay: 600ms;
16. }

We have positioned the paragraph 85px from the top and 10% from the left with a width of 80%. This will give the impression that the paragraph is in the centre of the block when it spans over 3 lines. We have set the opacity to 0 so it doesn’t appear initially, and set a transition on the opacity with a speed of 200ms using the linear timing function.

On hover we then set the opacity to 1, which makes the text fade in. We set a delay of 600ms, which will mean that the transition will happen after the initial rotation and the slide-in of the heading.

1. .hover_info a {
2. font-size: 1.5em;
3. padding: 10px 20px;
4. background: rgba(207, 138, 5, 0.7);
5. color: #E7E7E7;
6. position: absolute;
7. bottom: 25px;
8. right: -100%;
9. text-decoration: none;
10. }
11. .hover_info:hover a {
12. right: 0;
13. transition: right 200ms linear 700ms, color, background 200ms linear;
14. }
15. .hover_info a:hover {
16. background: rgba(207, 138, 5, 1.0);
17. color: #F7F7F7;
18. }

We have styled this tag the same as the heading tag, except this time it is in the bottom right, and, again, initially it is positioned off to the right. On hover we then transition from the right with a speed of 200ms using the linear timing function, this time with a delay of 700ms. This delay means that the transition will begin halfway through the paragraph’s transition. We then have a final pair of transitions for the colour and background with the same speed and timing function but no delay. This is for when the user hovers on the tag - it will change background and text colour.

In this tutorial we have used a variety of transitions, transform and transition-delays to create a chain of animations that reveal a title paragraph and link overlaid on an image.

Follow the link at the top of this article to download the files and view a full working demo.

Update: Thomas has created a collection of 25 different hover effects. You can see them and download the code on his website.

Thomas Hardy is a web developer based in Newcastle upon Tyne. He currently works at Union Room.