Cool Image Hover Effects with CSS

Cool Image Hover Effects with CSS

Are you looking for a pure class with pure CSS? These cool images hover effects with CSS you surely love. These are fresh hover effect which has pure uniqueness.

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

Nowadays, You have seen many website designers developed the design using lots of clean typography and subtle effects.
This trend increasing day by day and due to this trend in mind, I am going to share creative hover effects for grid items.

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, Becuase It works well with the all modern browsers and also CSS3 fully compatible with the CSS2 and it’s another version.

The Markup

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>

The CSS

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;
}

Refer to demo and source file to download it.

Code ExamplesYou May Also Like