45+ CSS3 Image Hover Effects

by
CSS3 Image Hover Effects
Code Snippet:Demo: CSS image hover effects
Author: Naoya
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 632
License: MIT
Edit Code online: View on CodePen
Read More
 Demo
Download (5 KB)

This code provides a collection of CSS3 Image Hover Effects. It allows you to enhance the appearance of images on your website when users hover over them. Each effect is designed to create smooth transitions, such as zooming, sliding, rotating, blurring, grayscale, sepia, and more. These effects can add interactivity and engagement to your website’s images.

Furthermore, you can integrate these hover effects into image galleries, product showcases, or portfolio pages. These effects engage users, making your website more attractive and interactive.

How to Use CSS3 Image Hover Effects

1. First, choose the effect you want for each image by adding the relevant class to the <div> containing the <figure> and <img> elements. You can mix and match effects on different images for a diverse gallery.

<h2 id="demo01">1. Zoom In #1</h2>
<div class="hover01 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo02">2. Zoom In #2</h2>
<div class="hover02 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo03">3. Zoom Out #1</h2>
<div class="hover03 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo04">4. Zoom Out #2</h2>
<div class="hover04 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo05">5. Slide</h2>
<div class="hover05 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo06">6. Rotate<span>(+Zoom Out)</span></h2>
<div class="hover06 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo07">7. Blur</h2>
<div class="hover07 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo08">8. Gray Scale</h2>
<div class="hover08 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo09">9. Sepia</h2>
<div class="hover09 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo10">10. Blur + Gray Scale</h2>
<div class="hover10 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo11">11. Opacity #1</h2>
<div class="hover11 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo12">12. Opacity #2</h2>
<div class="hover12 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo13">13. Flashing</h2>
<div class="hover13 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo14">14. Shine</h2>
<div class="hover14 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

<h2 id="demo15">15. Circle</h2>
<div class="hover15 column">
  <div>
    <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="https://picsum.photos/300/200?image=611" /></figure>
    <span>Hover</span>
  </div>
</div>

2. The CSS code includes various classes like .hover01, .hover02, and so on, each corresponding to a different hover effect. To apply an effect to an image, you’ll need to add the appropriate class to the HTML element containing the image. For example, <div class="hover01"> will create the “Zoom In #1” effect.

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

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

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

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

/* Slide */
.hover05 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;
}
.hover05 figure:hover img {
	margin-left: 0;
}

/* Rotate */
.hover06 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;
}
.hover06 figure:hover img {
	-webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
}

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

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

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

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

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

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

/* Flashing */
.hover13 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 */
.hover14 figure {
	position: relative;
}
.hover14 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);
}
.hover14 figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}

/* Circle */
.hover15 figure {
	position: relative;
}
.hover15 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;
}
.hover15 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;
	}
}

If you want to customize the duration or other properties of the effects, you can adjust the CSS properties within the respective classes. Experiment with values like scale, opacity, blur, or transform to achieve your desired look and feel.

That’s all! hopefully, you have successfully integrated CSS3 Image Hover Effects into your project. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X