Simple Image Hover Effect

Website’s interactive factor is one of the important factor that attracts your visitors to your page and let them stay on your site for longer periods. So, this tutorial is going to be a very simple yet stylish Image Hover Effect and believe me it’s very easy to implement this effect. The aim of this tutorial is to provide knowledge and you can go for the different variations with little code changes.

Here the idea is to apply the hover effect on items which will reveal a caption along with the title.

Now, Let’s get started.

    • The Markup

Okay, I don’t like you guys to know me as a intricate author. So I have added just a few code. Here <figure> element has been used to markup a figure in a document. And a <figcaption> element is used to define a caption for the figure we have added. On hovering, the <figcaption> will be displayed.

Also, I have used the image of a swayambhunath from www.oshoadventure.com.

 
sample108

Swayambhunath

An ancient religious architecture at top of a hill in the Kathmandu Valley.

 

We now have a markup, now it looks like it’s time to move on to the stylesheet now.

    • Style sheet

Now, the main part or tricky part, whatever you prefer to say is here. At first let us see some of  the CSS property like transform, transition and its property value. If you’ve not used these, no problem. I have described it below:

a. transform property:

This property is applied for manipulating an element by doing transformation (rotate,scale,move,skew,etc.,). Example: transform: translateZ(0);

This would do 3D translation, using only the value for z-axis. Note: This property may or may not work depending on the browser version.  Here, I have used skew value as well. This is to tilt an element like converting a rectangle to a parallelogram. skew() property value supports two parameters. Using only one parameter results to skew(x,0) tilt. The values for skew are angles: degrees, turns, or grads.

b. transition property

This will allow us to change property values from one to the next, over a duration that’s been specified.

Example:  transition: all 0.45s ease;

With a duration of 0.45s, an effect with a slow start, then fast and then again end slowly will be done on the element.

 

Beside these properties, the other properties that I have created while writing a stylesheet are very simple and I hope you have used other properties frequently. So here’s the stylesheet you need:

.picture {
background-color: #fff;
color: #ffffff;
display: inline-block;
max-width: 315px;
min-width: 230px;
overflow: hidden;
text-align: left;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
 
.picture *,
.picture *:before,
.picture *:after {
transition: all 0.45s ease;
}
 
.picture img {
max-width: 100%;
vertical-align: top;
}
 
.picture:before,
.picture:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
background-color: #111;
opacity: 0.5;
-webkit-transition: all 0.45s ease;
transition: all 0.45s ease;
}
 
.picture:before {
-webkit-transform: skew(30deg) translateX(-80%);
transform: skew(30deg) translateX(-80%);
}
 
.picture:after {
-webkit-transform: skew(-30deg) translateX(-70%);
transform: skew(-30deg) translateX(-70%);
}
 
.picture figcaption {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1;
bottom: 0;
padding: 25px 40% 25px 20px;
}
 
.picture figcaption:before,
.picture figcaption:after {
position: absolute;
content: '';
opacity: 0.5;
z-index: -1;
}
 
.picture figcaption:before {
-webkit-transform: skew(50deg) translateX(-70%);
transform: skew(50deg) translateX(-70%);
}
 
.picture figcaption:after {
-webkit-transform: skew(180deg) translateX(-70%);
transform: skew(180deg) translateX(-70%);
}
 
.picture h3,
.picture p {
opacity: 0;
}
 
.picture:hover h3,
.picture.hover h3,
.picture:hover p,
.picture.hover p {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 0.9;
 
}
 
.picture:hover:after,
.picture.hover:after {
-webkit-transform: skew(-180deg) translateX(0%);
transform: skew(-180deg) translateX(0%);
 
}
 
.picture:hover figcaption:before,
.picture.hover figcaption:before {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
 
.picture:hover figcaption:after,
.picture.hover figcaption:after {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}

We’ve now got everything we need. By now the simple image hover effect should work. You can go for modifications on CSS to bring different effects. It’s good to try on your own isn’t it? Happy Coding.

Working example: Demo | Download

Leave a Reply

Your email address will not be published. Required fields are marked *