12 Best On Hover Effects In CSS With Example

What Is : hover In CSS?

The: hover selector in CSS is one of The Most Used pseudo-classes that are used to style elements. Hover is used to selecting elements When users hover or mouseover that particular element. It is not just for links, the hover pseudo-class can be used on almost every element.

 : hover is often used with other similar pseudo-classes such as the

: link, visited, and: active selectors which style unvisited, visited, and active links.

Syntax – 

Element:hover{

Desired CSS ;

}

How To Use: hover pseudo-class in CSS

Example –

 <!DOCTYPE html>

<html>

<meta charset=”utf-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<head>

<style>

p:hover {

color: #fff;

background-color: #333;

}

</style>

</head>

<body>

<p align=”center”> hover element</p>

</body>

</html>

Here, the Paragraph (Hover Element) Will change.

We will start with simple then we will go to more advanced hover effects.

 

Best on hover effects In CSS

In The Article I will show you more than 12 cool on hover effects In CSS  and You can use any of them easily.

 

1.Changing Color Of the Link Or Text On Hover: 

<!DOCTYPE html>

<html>

<meta charset=”utf-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<head>

<style>

.para1{

color:black;

transition:0.4s ease-in-out;

}

.para1:hover {

color: blue;

}

</style>

</head>

<body>

<p class=”para1″> Best on hover effects In CSS</p>

</body>

</html>

This is one of the easiest (on hover) effects In CSS, here the hover element’s color will change.

2.Changing Size of The Element or Zooming In:

<!DOCTYPE html>

<html>

<meta charset=”utf-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<head>

<style>

.grow{

color:#fff;

padding:10px;

width:100px;

height:100px;

background:black;

transition:0.4s ease;

}

.grow:hover {

 color:#000;

  background-color: yellow;

  transform:scale(1.1);

}

</style>

</head>

<body>

<p class=”grow”>Best on hover effects In CSS</p>

</body>

</html>

Here, The Element will grow on hover. This is also one of the easiest and most used (on hover) effects In CSS

3: Increasing the Opacity on Hover 

<!DOCTYPE html>

<html>

<meta charset=”utf-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<head>

<style>

.grow{

transition:0.4s ease;

opacity:0.5;

}

.fade:hover {

  background-color: yellow;

  opacity:1;

}

</style>

<body>

<p class=”fad”>Best on hover effects In CSS</p>

</body>

</html>

Here, The Element will Fade In on hover.

4.Adding Underline Or Overline On Hover

<!DOCTYPE html>

<html>

<meta charset=”utf-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<head>

<style>

.grow{

transition:0.4s ease;

opacity:0.5;

width:100px;

height:auto;

text-align:center;

padding:10px;

border-bottom:2px solid #fff;

}

.grow:hover {

 border-bottom:2px solid #333;

}

</style>

<body>

<p class=”grow”>Hover On This</p>

</body>

</html>

Here The an underline or border at the bottom.

now we heading in Advanced Best on hover effects In CSS

Also Read : Best Free VPN For Android

5.Adding Box Shadow On Hover :

<!DOCTYPE html>

<html>

<meta charset=”utf-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<head>

.element{

color:#fff;

background:#333;

transition:0.4s ease;

opacity:0.5;

width:100px;

height:auto;

text-align:center;

padding:10px;

cursor:pointer;

}

.element:hover {

  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);

 

}

</style>

</head>

<body>

<p class=”element”>Hover Me</p>

</body>

</html>

This is one of the most used and Best on hover effects In CSS

6. TranslateY on Hover

<!DOCTYPE html>

<html>

<meta charset=”utf-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<head>

<style>

.element{

color:#fff;

background:#333;

transition:0.4s ease;

opacity:0.5;

width:100px;

height:auto;

text-align:center;

padding:10px;

cursor:pointer;

}

.element:hover {

  transform:translateY(-5px);

}

</style>

</head>

<body>

<p class=”element”>Hover Me</p>

</body>

</html>

Here, The Element will go a little bit higher on hover and you can do vice versa as well.

7.Multiple Effects on hover

<!DOCTYPE html>

<html>

<meta charset=”utf-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<head>

<style>

.element{

color:#fff;

background:#333;

transition:0.4s ease;

opacity:0.5;

width:100px;

height:auto;

text-align:center;

padding:10px;

cursor:pointer;

}

.element:hover {

  transform:translateY(-5px);

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    color:#333;

    background:#fff;

}

</style>

</head>

<body>

<p class=”element”>Hover Me</p>

</body>

</html>

Here, Multiple Effects or Grouped Effects work together.

 

Also Read : Google Tricks and tips

8. Rotate An Element On Hover

<!DOCTYPE html>

<html>

<meta charset=”utf-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<head>

<style>

.element{

color:#fff;

background:#333;

transition:0.4s ease;

opacity:0.5;

width:100px;

height:auto;

text-align:center;

padding:10px;

cursor:pointer;

}

.element:hover {

transform:rotateX(360deg);

}

</style>

</head>

<body>

<p class=”element”>Hover Me</p>

</body>

</html>

This Will rotate the hover element 360deg.

9. Overlay On Image on Hover

<!DOCTYPE html>

<html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<style>

.outer-div {

  position: relative;

  width: 100%;

  height:100%;

}

.image1 {

  display: block;

  width: 100%;

  height: auto;

}

.overlay {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  height: 100%;

  width: 100%;

  opacity: 0;

  transition: .5s ease;

  background-color: #000;

}

.outer-div:hover .overlay {

  opacity: 1;

}

.content {

  color: #fff;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  font-weight:600;

}

</style>

</head>

<body>

<div class=”outer-div”>

  <img src=”img.jpg” class=”image1″>

  <div class=”overlay”>

    <span class=”content”>Hover Effect</div>

  </div>

</div>

</body>

</html>

10. Black And White Image On Hover

<!DOCTYPE html>

<html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<style>

img:hover {

  transition:0.5s ease-in-out;

  filter: grayscale(100%);

  cursor:pointer;

}

</style>

</head>

<body>

<img src=”img.jpg”>

</body>

</html>

11.Adding Bounce Effect To An Element On Hover

<!DOCTYPE html>

<html>

<meta charset=”utf-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<head>

<style>

.element{

color:#fff;

background:#333;

transition:0.4s ease;

opacity:0.5;

width:100px;

height:auto;

text-align:center;

padding:10px;

cursor:pointer;

}

.element:hover {

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    color:#333;

    background:#fff;

    animation:bounceeffect 0.5s ease;

    

}

@keyframes bounceeffect {

  0%{

    transform: translateY(0);

  }

20%{

    transform: translateY(0px);

  }

  40% {

    transform: translateY(-20px);

  }

60% {

    transform: translateY(0);

  }

  80% {

    transform: translateY(-10px);

  }

  

  100% {

    transform: translateY(0);

  }

}

</style>

</head>

<body>

<p class=”element”>Hover Me</p>

</body>

</html>

12. Adding Animation On Hover -Change Background Color Automatically

<!DOCTYPE html>

<html>

<meta charset=”utf-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<head>

<style>

.element{

color:#fff;

background:#333;

transition:0.4s ease;

opacity:0.5;

width:100px;

height:auto;

text-align:center;

padding:10px;

cursor:pointer;

font-weight:700;

}

.element:hover {

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    animation:effect 2s ease-in-out infinite;

    

}

@keyframes effect {

  0%{

    background-color:royalblue;

  }

20%{

    background-color:teal;

  }

  40% {

    background-color:#5f27cd;

  }

  60% {

    background-color:#0abde3;

  }

  80% {

    background-color:#58B19F;

  }

  

  100% {

    background-color:#0abde3;

  }

}

</style>

</head>

<body>

<p class=”element”>Hover Me</p>

</body>

</html>

BONUS: Gradient Effect 

<!DOCTYPE html>

<html>

<meta charset=”utf-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<head>

<style>

.element{

color:#fff;

background:#333;

transition:0.4s ease;

width:100px;

height:auto;

text-align:center;

padding:10px;

cursor:pointer;

font-weight:700;

}

.element:hover {

   background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

 }

</style>

</head>

<body>

<p class=”element”>Hover Me</p>

</body>

</html>

 

Cool on Hover Effect In CSS – Here

Here The Background Changes to Gradient on Hover.

You can with them to create any kind of effects. These have been the Few Easy and Cool on hover effects In CSS.  Having Styling, Developers….

 

Learn CSS For Free

Leave a Comment