15+ Cool Image Hover Effects with Pure CSS & HTML

Find a collection of 15 hands made Cool Image Hover Effects with CSS & HTML. It includes live demo and source code example which is easy to copy & paste.

Are you looking for readymade creative and stunning hover effects? We have developed some modern and fresh looking effects which have pure uniqueness.

You will never found such an amazing effect over the internet and but if you are on this post, you will easily find them and implement on your upcoming project.

Nowadays, You have seen many website designers developed the design using lots of clean typography and subtle effects.

This trend increasing day by day. Due to this trend, I am going to share creative hover effects for grid items. You can use them on any type of website whether it’s a CMS or custom website.

If you plan to build any kind of delightful element from scratch. It will take much time which you surely want to save.

If you are short with time and looking for surprise elements then your job is just to copy and paste the source code and you are done.

This is just because of CSS3 and we all thankful to CSS3 to allow developers to create stunning effects easily. You don’t need to be an expert to implement these effects. You just have some basic knowledge of HTML and CSS.

Any web design elements can be created using jQuery but CSS3 reduce load time so these hover effects going to work smoothly.

Likewise, With the help of CSS3, We can enhance the image resolution to provide more clarity and also it’s easy to customize.

It has much flexibility to produce powerful web design element and increase the user experience.

If you are worried about compatibility, you should not be. Because it works well with the all modern browsers and also CSS3 fully compatible with the CSS2 and it’s another version.

HTML Structure for Image

Just like in our previous article, We build a set of image hover effects with the caption, Here we will use the same structure for HTML.

For the structure, we simply have a div element with a class grid which has a figure element. This element holds all the HTML data which include an image and figcaption.

The figcaption has all the required text, heading, and link which will show when the user hovers.

<div class="grid">
	<figure class="effect-lily">
		<img src="img/1.jpg" alt="img01"/>
		<figcaption>
			<h2>Nice <span>Lily</span></h2>
			<p>Lily likes to play with crayons and pencils</p>
			<a href="#">View more</a>
		</figcaption>			
	</figure>
</div>

CSS for Cool Hover Effects

Let’s start with the grid and make apply some general style.

.grid {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 1000px;
	list-style: none;
	text-align: center;
}

Just to remember, There is some common style which every effect need. These style help to make the effect responsive and as well as style the text, heading, and links.

Just like have a look at how we did style for figure element and make an image responsive.

.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 320px;
	max-width: 480px;
	max-height: 360px;
	width: 48%;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}
.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

Each set of hover effect has its own CSS which is defined in the set1.css. Just take a look a style for “Lily” effect.

figure.effect-lily img {
	max-width: none;
	width: -webkit-calc(100% + 50px);
	width: calc(100% + 50px);
	opacity: 0.7;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0, 0);
	transform: translate3d(-40px,0,0);
}
figure.effect-lily figcaption {
	text-align: left;
}
figure.effect-lily figcaption > div {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	height: 50%;
}
figure.effect-lily h2,
figure.effect-lily p {
	-webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}
figure.effect-lily h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}
figure.effect-lily p {
	color: rgba(255,255,255,0.8);
	opacity: 0;
	-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
	transition: opacity 0.2s, transform 0.35s;
}
figure.effect-lily:hover img,
figure.effect-lily:hover p {
	opacity: 1;
}
figure.effect-lily:hover img,
figure.effect-lily:hover h2,
figure.effect-lily:hover p {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
figure.effect-lily:hover p {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
	-webkit-transition-duration: 0.35s;
	transition-duration: 0.35s;
}

I hope you like these cool CSS image hover effects. Watch the demo and download source code.

You May Also Like

Leave a Comment