Design Lunatic – Interesting Hover Effect With CSS3

Interesting Hover Effect With CSS3

Oct 11, 2011 | In CSS, Tutorials | By: Design Lunatic

In this tutorial, I’ll teach you how to create an impressive hover effect, which works great for when you have a box with text inside it. You’ll see what I mean in a moment.

View The Demo

Download Files

HTML

First, we’ll need some HTML to base our styles on.

<section id="boxes">

<section class="thumb" id="thumb1">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		lorem ipsum dolor
	</div>
</div>
</a>
</section>

</section>

That’s one thumbnail inside a section called “boxes”. In each thumbnail, there’s a picture, and a semi-transparent overlay on top of the picture which contains a few lines of text.

We’ll go ahead and add some more thumbnails.

<body>

<section id="boxes">

<section class="thumb" id="thumb1">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		lorem ipsum dolor
	</div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		sit amet elit
	</div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		posuere interdum porta
	</div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		metus id augue 
	</div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		ultrices sit amet
	</div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		aliquam enim cursus
	</div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		varius nisl et felis
	</div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		facilisis egestas
	</div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		ultricies eget massa
	</div>
</div>
</a>
</section>

</section>

</body>

That’s all the HTML we need here. Let’s move on to the fun part.

CSS3

First, we’ll define some basic styles that we’ll need to make the page work right.

body {
background: #787878;
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
}

#boxes {
width: 750px;
margin: 0 auto;
margin-top: 50px;
}

Now, we’ve got to style the thumbnails. This is where it gets slightly confusing. Here’s how it works: There’s a “thumb” section that contains 2 things: the image, and a “box” div. The image is just an image, and the “box” div is the overlay on top, which also contains the text. Both the image and the “box” div are “position:absolute”. That way, they can fit in the same box with no negative margins, or any other complications like that.

.thumb {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
margin: 25px;
float: left;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
transition: all 200ms linear;
-webkit-box-shadow: 0px 0px 7px 16px #333333;
-moz-box-shadow: 0px 0px 7px 16px #333333;
box-shadow: 0px 0px 16px 7px #555555;
}

.thumb:active {
-webkit-box-shadow: 0px 0px 7px 16px #ffffff;
-moz-box-shadow: 0px 0px 7px 16px #ffffff;
box-shadow: 0px 0px 20px 5px #999999;
}

.thumb img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
position: absolute;
width: 200px;
height: 200px;
}

So, we’ve got the “thumb” section styles, and we’ve also given the image some styles. This is all just to make them look good. However, there is something very important in the code above: the “overflow: hidden” style for the “thumb”. This way, when the text expands, it doesn’t look ugly, and it also doesn’t block the ability to hover on the other thumbs.

.box {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.95;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
position: absolute;
width: 198px;
height: 198px;
border: 1px solid #313131;
background: #3f3f3f;
}

.thumb:hover .box{
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
opacity: 0;
}

The “box” styles are just to make it look good. The “thumb” hover state, on the other hand, is quite important. That’s the sole reason it all works. When the user hovers over a thumbnail, the “box” div inside it animates to “opacity: 0″, and becomes twice as big. The result is what you see in the demo: The text expands, and ends up looking great!

Categories

Interesting Hover Effect With CSS3

HTML

CSS3