X

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

Gravity
Gravity
Gravity

1. Zoom In #1

Gravity
Gravity
Gravity

2. Zoom In #2

Gravity
Gravity
Gravity

3. Zoom Out #1

Gravity
Gravity
Gravity

4. Zoom Out #2

Gravity
Gravity
Gravity

5. Slide

Gravity
Gravity
Gravity

6. Rotate(+Zoom Out)

Gravity
Gravity
Gravity

7. Blur

Gravity
Gravity
Gravity

8. Gray Scale

Gravity
Gravity
Gravity

9. Sepia

Gravity
Gravity
Gravity

10. Blur + Gray Scale

Gravity
Gravity
Gravity

11. Opacity #1

Gravity
Gravity
Gravity

12. Opacity #2

Gravity
Gravity
Gravity

13. Flashing

Gravity
Gravity
Gravity

14. Shine

Gravity
Gravity
Gravity

15. Circle

Gravity
Gravity
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.

This website uses cookies.