Simple Image Hover Effects with Captions Text

If you are a designer then you surely love Image hover effects because it’s a simple and quick way to show text, description, and caption on the image when hovering it.

The hover effects can be developed by using CSS3 features such as animation, transition, and pseudo-elements in order to create such beautiful and nice-looking subtle effects.

They enhance the user experience of the website and make easier for users to navigate the site.  Also, it’s a great way to show some important text and reveal it in a nice way.

By using the jQuery, you can easily create amazing image overlay hover effects. But it’s overload your site. After released of CSS3, we don’t need to rely on JavaScript too much. CSS3 makes designing easier.

By using the CSS3, We can easily make cool looking effects and don’t need to implement any JavaScript. Another reason for using CSS3 is its load faster as compared to jQuery.

The hover effects are required to improve the design, styling, and usability of a website. It adds extra energy to your site and improves the user experience. It allows users to stay more time on your site.

We have made four effects, but here I am going to explain only the first one. You will get the code examples and see the demo for all other effects.

The Markup for Image

We have total 4 really simple effects that you can find in the demo but here I will show you the source code of the first effect.

Ok, let start with the HTML.

<figure class="test col-xs-6">
    <img src="https://images.freeimages.com/images/premium/previews/3252/3252135-music-stage.jpg">
    <figcaption>
        <h1>Lorem Ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lorem nunc, sollicitudin a nisi sodales, imperdiet dignissim enim. Nam sapien quam</p>
    </figcation>
</figure>

CSS Style for Image Hover

Here is Complete CSS for the first effect.

/*With :after */
figure.test {	
	display: inline-block;
	position: relative;
	overflow: hidden;	
	text-align: center;		
	cursor: pointer;
	width:44%;
}
figure.test img {
	width: 100%;
	height: 100%;
}
figure.test figcaption {
	position: absolute;
	top: 50%;
	left: 22.5%;
	right: 22.5%;	
	width: 200px;
	opacity: 0;
	z-index: 1;
	transition: all 0.8s ease-out;
	transition-delay: 0.2s;
}
figure.test:after {
	display: inline-block;
	position: absolute;
	content: "";
	top: 7%;
	left: 10%;
	right: 10%;
	bottom: 7%;
	background: white;
	opacity: 0;
	transition: all 0.8s ease-out;
}
figure.test:hover:after {
	opacity: 0.9;
}
figure.test:hover figcaption {
	transform: translateY(-50%);
	opacity: 1;
}

You Might Be Interested In: