By
Save space and show information on-hover stylishly with hover effects
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.
