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
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
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
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
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
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
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
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
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
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
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.
About the Author
