How To Create Image Hover Overlay Effects?

Technology, Programming Leave a comment

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

<h2>CSS Image Hover Effects - Image Overlay Hover Effects With CSS3 Transitions</h2>
<p>← <a href="https://www.pakainfo.com/image-overlay-hover-effects-with-css3-transitions/" target="_blank" rel="noopener">View the article</a></p>

<h2>No Effect</h2>
<div class="column">
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=244" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=1024" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=611" /></figure>
    <span>Gravity</span>
  </div>
</div>

<h2 id="demo01">1. Zoom In #1</h2>
<div class="gravity01 column">
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=244" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=1024" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=611" /></figure>
    <span>Gravity</span>
  </div>
</div>

<h2 id="demo02">2. Zoom In #2</h2>
<div class="gravity02 column">
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=244" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=1024" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=611" /></figure>
    <span>Gravity</span>
  </div>
</div>

<h2 id="demo03">3. Zoom Out #1</h2>
<div class="gravity03 column">
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=244" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=1024" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=611" /></figure>
    <span>Gravity</span>
  </div>
</div>

<h2 id="demo04">4. Zoom Out #2</h2>
<div class="gravity04 column">
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=244" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=1024" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=611" /></figure>
    <span>Gravity</span>
  </div>
</div>

<h2 id="demo05">5. Slide</h2>
<div class="gravity05 column">
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=244" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=1024" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=611" /></figure>
    <span>Gravity</span>
  </div>
</div>

<h2 id="demo06">6. Rotate<span>(+Zoom Out)</span></h2>
<div class="gravity06 column">
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=244" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=1024" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=611" /></figure>
    <span>Gravity</span>
  </div>
</div>

<h2 id="demo07">7. Blur</h2>
<div class="gravity07 column">
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=244" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=1024" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=611" /></figure>
    <span>Gravity</span>
  </div>
</div>

<h2 id="demo08">8. Gray Scale</h2>
<div class="gravity08 column">
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=244" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=1024" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=611" /></figure>
    <span>Gravity</span>
  </div>
</div>

<h2 id="demo09">9. Sepia</h2>
<div class="gravity09 column">
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=244" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=1024" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=611" /></figure>
    <span>Gravity</span>
  </div>
</div>

<h2 id="demo10">10. Blur + Gray Scale</h2>
<div class="gravity10 column">
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=244" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=1024" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=611" /></figure>
    <span>Gravity</span>
  </div>
</div>

<h2 id="demo11">11. Opacity #1</h2>
<div class="gravity11 column">
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=244" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=1024" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=611" /></figure>
    <span>Gravity</span>
  </div>
</div>

<h2 id="demo12">12. Opacity #2</h2>
<div class="gravity12 column">
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=244" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=1024" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=611" /></figure>
    <span>Gravity</span>
  </div>
</div>

<h2 id="demo13">13. Flashing</h2>
<div class="gravity13 column">
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=244" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=1024" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=611" /></figure>
    <span>Gravity</span>
  </div>
</div>

<h2 id="demo14">14. Shine</h2>
<div class="gravity14 column">
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=244" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=1024" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=611" /></figure>
    <span>Gravity</span>
  </div>
</div>

<h2 id="demo15">15. Circle</h2>
<div class="gravity15 column">
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=244" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=1024" /></figure>
    <span>Gravity</span>
  </div>
  <div>
    <figure><img src="https://www.domain_name.com/800/400?image=611" /></figure>
    <span>Gravity</span>
  </div>
</div>

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.

Related posts:

  1. Image Overlay Hover Effects With CSS3 Transitions
  2. css zoom background image on hover Example
  3. Multiple image slider in html source code
  4. jQuery Full screen Navigation Overlay
  5. How to add a gradient overlay to a background image using just CSS and HTML?
  6. how to make a pop up image in html?
  7. WordPress Next Previous Article/post using CSS
  8. How To Create Social Media icons footer using bootstrap?
  9. How To Create a Mobile Navigation hamburger Menu using CSS?
Also Read This 👉   Get HTML source code of page with php - Scrape