Posted inTechnology / Programming

How To Create Image Hover Overlay Effects?

Today, We want to share with you image hover effects.In this post we will show you html hover image, hear for css hover we will give you demo and example for implement.In this post, we will learn about Image Overlay Hover Effects With CSS3 Transitions with an example.

css hover | hover css | css image | css hover effects | image overlay

HTML Code

CSS Image Hover Effects - Image Overlay Hover Effects With CSS3 Transitions

View the article

No Effect

image hover effects
Gravity
image hover effects
Gravity
image hover effects
Gravity

1. Zoom In #1

image hover effects
Gravity
image hover effects
Gravity
image hover effects
Gravity

2. Zoom In #2

image hover effects
Gravity
image hover effects
Gravity
image hover effects
Gravity

3. Zoom Out #1

image hover effects
Gravity
image hover effects
Gravity
image hover effects
Gravity

4. Zoom Out #2

image hover effects
Gravity
image hover effects
Gravity
image hover effects
Gravity

5. Slide

image hover effects
Gravity
image hover effects
Gravity
image hover effects
Gravity

6. Rotate(+Zoom Out)

image hover effects
Gravity
image hover effects
Gravity
image hover effects
Gravity

7. Blur

image hover effects
Gravity
image hover effects
Gravity
image hover effects
Gravity

8. Gray Scale

image hover effects
Gravity
image hover effects
Gravity
image hover effects
Gravity

9. Sepia

image hover effects
Gravity
image hover effects
Gravity
image hover effects
Gravity

10. Blur + Gray Scale

image hover effects
Gravity
image hover effects
Gravity
image hover effects
Gravity

11. Opacity #1

image hover effects
Gravity
image hover effects
Gravity
image hover effects
Gravity

12. Opacity #2

image hover effects
Gravity
image hover effects
Gravity
image hover effects
Gravity

13. Flashing

image hover effects
Gravity
image hover effects
Gravity
image hover effects
Gravity

14. Shine

image hover effects
Gravity
image hover effects
Gravity
image hover effects
Gravity

15. Circle

image hover effects
Gravity
image hover effects
Gravity
image hover effects
Gravity

CSS Code

body {
	color: #333;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}
h1,
h1+p {
	margin: 30px 15px 0;
	font-weight: 300;
}
h1+p a {
	color: #333;
}
h1+p a:hover {
	text-decoration: none;
}
h2 {
	margin: 60px 15px 0;
	padding: 0;
	font-weight: 300;
}
h2 span {
	margin-left: 1em;
	color: #aaa;
	font-size: 85%;
}
.column {
	margin: 15px 15px 0;
	padding: 0;
}
.column:last-child {
	padding-bottom: 60px;
}
.column::after {
	content: '';
	clear: both;
	display: block;
}
.column div {
	position: relative;
	float: left;
	width: 300px;
	height: 200px;
	margin: 0 0 0 25px;
	padding: 0;
}
.column div:first-child {
	margin-left: 0;
}
.column div span {
	position: absolute;
	bottom: -20px;
	left: 0;
	z-index: -1;
	display: block;
	width: 300px;
	margin: 0;
	padding: 0;
	color: #444;
	font-size: 18px;
	text-decoration: none;
	text-align: center;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity: 0;
}
figure {
	width: 300px;
	height: 200px;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
}
figure:hover+span {
	bottom: -36px;
	opacity: 1;
}



/* Zoom In #1 */
.gravity01 figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.gravity01 figure:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

/* Zoom In #2 */
.gravity02 figure img {
	width: 300px;
	height: auto;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.gravity02 figure:hover img {
	width: 350px;
}

/* Zoom Out #1 */
.gravity03 figure img {
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.gravity03 figure:hover img {
	-webkit-transform: scale(1);
	transform: scale(1);
}

/* Zoom Out #2 */
.gravity04 figure img {
	width: 400px;
	height: auto;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.gravity04 figure:hover img {
	width: 300px;
}

/* Slide */
.gravity05 figure img {
	margin-left: 30px;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.gravity05 figure:hover img {
	margin-left: 0;
}

/* Rotate */
.gravity06 figure img {
	-webkit-transform: rotate(15deg) scale(1.4);
	transform: rotate(15deg) scale(1.4);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.gravity06 figure:hover img {
	-webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
}

/* Blur */
.gravity07 figure img {
	-webkit-filter: blur(3px);
	filter: blur(3px);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.gravity07 figure:hover img {
	-webkit-filter: blur(0);
	filter: blur(0);
}

/* Gray Scale */
.gravity08 figure img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.gravity08 figure:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

/* Sepia */
.gravity09 figure img {
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.gravity09 figure:hover img {
	-webkit-filter: sepia(0);
	filter: sepia(0);
}

/* Blur + Gray Scale */
.gravity10 figure img {
	-webkit-filter: grayscale(0) blur(0);
	filter: grayscale(0) blur(0);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.gravity10 figure:hover img {
	-webkit-filter: grayscale(100%) blur(3px);
	filter: grayscale(100%) blur(3px);
}

/* Opacity #1 */
.gravity11 figure img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.gravity11 figure:hover img {
	opacity: .5;
}

/* Opacity #2 */
.gravity12 figure {
	background: #1abc9c;
}
.gravity12 figure img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.gravity12 figure:hover img {
	opacity: .5;
}

/* Flashing */
.gravity13 figure:hover img {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}

/* Shine */
.gravity14 figure {
	position: relative;
}
.gravity14 figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.gravity14 figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}

/* Circle */
.gravity15 figure {
	position: relative;
}
.gravity15 figure::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.gravity15 figure:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

I hope you get an idea about css image hover effects.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

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

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype