In my previous article, we have seen some good css3 effects which we can use in our web pages. On hover of the elements, different effects are added for the elements, so that the pages are more interesting. Thought of sharing few more good stuffs, which may inspire you and may be helpful for you when you develop web pages. As a continuation of the previous article, we will see few hover effects with css3. As we know the power of CSS3 is enormous. All these tutorials are just an attempt to explore and exploit the power of css3 in a creative way.
Hover effects with CSS3
In this article, we will see some awesome hover effects with CSS3. With the help of css3 transitions, keyframe, we will create different type of animations and effects. In the demo, I have added different type of hover effects using CSS3. But in this article, we will see one of the demos in detail.
HTML for Hover effect example
We will use HTML tags as less as possible. Before we go to the html and css, have a look at the first demo.
<div class="demos demo-one">
<img src="my-image.jpg" />
<div class="overlay overlay-1"></div>
<div class="overlay overlay-2"></div>
<div class="content">
<h2>THIS IS TITLE</h2>
<p>Description goes here...</p>
<a href="#" class="info">Read More</a>
</div>
</div>
In this HTML, a container with the class name ‘demos’ and img, overly divs and a content div with title, description and a read more button. For this particular example, we need two overlays. So two divs with ‘overlay’ class is added.
CSS for Hover effects
Our mark up is ready. Now the styling part of the container and the contents.
.demos {
border: 10px solid #fff;
border-radius: 6px;
box-shadow: 1px 1px 4px #909090;
cursor: default;
float: left;
height: 200px;
width: 300px;
margin: 10px;
overflow: hidden;
position: relative;
text-align: center;
color: #fff;
}
.demos .overlay, .demos .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.demos h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.demos p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.demos a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
}
.demos a.info:hover {
box-shadow: 0 0 5px #000;
}
.demo-one .overlay-1,
.demo-one .overlay-2{
height: 361px;
width: 361px;
background: rgba(11,11,11,0.5);
opacity: 1;
transition: all 0.3s ease-in-out 0.6s;
}
.demo-one .overlay-1 {
left: auto;
right: 0px;
transform: rotate(56.5deg) translateX(-180px);
transform-origin: 100% 0%;
}
.demo-one .overlay-2 {
top: auto;
bottom: 0px;
transform: rotate(56.5deg) translateX(180px);
transform-origin: 0% 100%;
}
.demo-one .content{
background: rgba(0,0,0,0.9);
height: 0px;
opacity: 0.5;
width: 361px;
overflow: hidden;
transform: rotate(-33.5deg) translate(-112px,166px);
transform-origin: 0% 100%;
transition: all 0.4s ease-in-out 0.3s;
}
.demo-one h2{
background: transparent;
margin-top: 5px;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.demo-one a.info{
display: none;
}
.demo-one:hover a.info{
display: block;
}
.demo-one:hover .content{
height: 150px;
width: 300px;
opacity: 0.9;
top: 40px;
transform: rotate(0deg) translate(0px,0px);
}
.demo-one:hover .overlay-1,
.demo-one:hover .overlay-2{
transition-delay: 0s;
}
.demo-one:hover .overlay-1{
transform: rotate(56.5deg) translateX(1px);
}
.demo-one:hover .overlay-2 {
transform: rotate(56.5deg) translateX(-1px);
}
Explanation for CSS for hover effect
We have added the necessary styles to add the hover effect. The two masks in our html will have a different translation and a transform origin. We’ll set one to be aligned at the top and the other at the bottom. The content is styled in a way that it looks like as if it’s coming out as a tiny slice through the touching edges of the two masks.
We’ll make the content come out from the slot and make the masks touch at their edges, on over of the image. We are setting the transition-delay for the masks in such a way, that when we hover, the transition happens instantly. But when moving out with the mouse, the delay will be longer, as if its “waiting” for the content to move back into the slot.
Demo for the Hover effect
The similar way, we can add different hover effect to HTML elements. Hope the examples given are helpful. Try other effects on your own.
