Scribd
Upload
73 views14 pages

Hover Effect

The document describes 10 simple CSS hover effects that can be applied to images, including making an image grayscale and adding color on hover, fading an image in on hover, growing or shrinking an image on hover, changing an image from square to circle on hover, adding a 3D shadow on hover, adding a border on hover, blurring an image on hover, tilting an image on hover, and brightening an image on hover. CSS code is provided for each effect.

Uploaded by

Om Patel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
73 views14 pages

Hover Effect

The document describes 10 simple CSS hover effects that can be applied to images, including making an image grayscale and adding color on hover, fading an image in on hover, growing or shrinking an image on hover, changing an image from square to circle on hover, adding a 3D shadow on hover, adding a border on hover, blurring an image on hover, tilting an image on hover, and brightening an image on hover. CSS code is provided for each effect.

Uploaded by

Om Patel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

10 SIMPLE CSS HOVER EFFECTS

1. Grayscale To Color CSS


Add the following CSS:

.color img{

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-webkit-transition: all 1s ease;

.color img:hover{

filter: grayscale(0%);

filter: gray;

-webkit-filter: grayscale(0%);

filter: none;

transition: 1s ease;

Add the following div class to the image:

<div class=”color”>

Hover Over Image


2. Fade In Image CSS
Add the following CSS:

.fadein img{

opacity:0.5;

transition: 1s ease;

.fadein img:hover{

opacity:1;

transition: 1s ease;

}
Add the following div class to the image:

<div class=”fadein”>

Hover Over Image

3. Grow Image CSS


Add the following CSS:

.grow img{

transition: 1s ease;

}
.grow img:hover{

-webkit-transform: scale(1.2);

-ms-transform: scale(1.2);

transform: scale(1.2);

transition: 1s ease;

Add the following div class to the image:

<div class=”grow”>

Hover Over Image


4. Shrink Image CSS
Add the following CSS:

.shrink img {

transition: 1s ease;

.shrink img:hover{

-webkit-transform: scale(0.8);

-ms-transform: scale(0.8);

transform: scale(0.8);

transition: 1s ease;

Add the following div class to the image:

<div class=”shrink”>

Hover Over Image


5. Square to Circle CSS
Add the following CSS:

.circle img {

transition: 1s ease;

.circle img:hover {

border-radius:50%;

transition: 1s ease;

}
Add the following div class to the image:

<div class=”circle”>

Hover Over Image

6. 3D Shadow CSS
Add the following CSS:

.shadow img {

transition: .5s ease;

}
.shadow img:hover{

box-shadow:

1px 1px #373737,

2px 2px #373737,

3px 3px #373737,

4px 4px #373737,

5px 5px #373737,

6px 6px #373737;

-webkit-transform: translateX(-3px);

transform: translateX(-3px);

transition: .5s ease;

Add the following div class to the image:

<div class=”shadow”>

Hover Over Image


7. Add Border To Image CSS
Add the following CSS:

.border img {

transition: .5s ease;

.border img:hover{

box-shadow: 0 0 0 10px #000000;

transition: .5s ease;

}
Add the following div class to the image:

<div class=”border”>

Hover Over Image

8. Blur Image CSS


Add the following CSS:

.blur img{

transition: 1s ease;

}
.blur img:hover {

-webkit-filter: blur(5px);

transition: 1s ease;

Add the following div class to the image:

<div class=”blur”>

Hover Over Image

9. Tilt Image CSS


Add the following CSS:
.rotate img{

transition: 1s ease;

.rotate img:hover{

-webkit-transform: rotateZ(-10deg);

-ms-transform: rotateZ(-10deg);

transform: rotateZ(-10deg);

transition: 1s ease;

Add the following div class to the image:

<div class=”rotate”>

Hover Over Image


10. Brighten Image CSS
Add the following CSS:

.brighten img {

-webkit-filter: brightness(50%);

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}
.brighten img:hover {

-webkit-filter: brightness(100%);

Add the following div class to the image:

<div class=”brighten”>

You might also like