10 Simple CSS Hover Effects

Below I have provided a series of CSS elements that you can copy and paste into your CSS style sheet to achieve different effects on images.

Please note that some CSS coding may not be translated by specific browsers and versions. In order to experience all CSS elements please view in the latest version of Google Chrome. If you would like detailed information on how to achieve every effect across all browsers please contact us today.

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

Denver Web Design CSS Tip8

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

Denver Web Design CSS Tip5

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

Denver Web Design CSS Tip1

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

Denver Web Design CSS Tip2

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

Denver Web Design CSS Tip3

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

Denver Web Design CSS Tip4

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

Denver Web Design CSS Tip6

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

Denver Web Design CSS Tip7

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

Denver Web Design CSS Tip9

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”>

Hover Over Image

Denver Web Design CSS Tip10

You can adjust the time the effects take as well as the intensity of the effects by adjusting the variables within the CSS. If you would like to learn more about CSS effects and properties please continue to follow our journal or get in touch with us! If you are searching for a new web design build or redesign please feel free to view our Web Design page or contact us for available options.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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