4 Common CSS hover effects

#webdev #css #beginners #tutorial

Color change/inverse

Mostly used for links, buttons, and navigation elements, a color change color effect is when the color of an element changes when hovered. For buttons and div's however, their color inverses. That means the color of their text and the color of their background switch. This is the easiest hover effect to make out of all of these examples.

h1 {
  font-family: Poppins;
  transition: 0.3s;
}
/*Changing the color when hovered*/
h1:hover {
  color: #2a9d8f;
}

button {
  border-radius: 5px;
  width: 150px;
  height: 50px;
  font-family: Poppins;
  color: #2a9d8f;
  background-color: white;
  border-color: #2a9d8f;
}

/*Notice how the color and background color switch*/
button:hover {
  background-color: #2a9d8f;
  color: white;
  transition: 0.3s;
}

Box Shadow

Another simple hover effect is with a box shadow. You can also add extra CSS elements to the effect like raising the HTML element up or making it pop out. If you don't know a box shadow's property goes box-shadow: right down blur/color meaning the first value is how much to the right it goes, the second is how far down, and the third is the color or amount of blur.

.box, .secondBox {
  border-radius: 5px;
  width: 200px;
  height: 200px;
  background-size: cover;
  background-image: url("https://images.unsplash.com/photo-1675946729462-f82faa327f77?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80");
  transition: 0.4s;
}
/*The bottom margin will make it go up*/
.box:hover {
  margin-bottom: 20px;
  box-shadow: 20px 20px #ff006e;
}

.secondBox {
  background-image: url("https://images.unsplash.com/photo-1676979382991-aa4748943525?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80");
}
/*Remember, the third vlue can be how much of it is blurred*/
.secondBox:hover {
  box-shadow: 5px 5px 10px;
}

Underlined text

Mostly used in nav's, another common hover effect is a text being underlined. It can be another option other than the color change hover effect that'll interest your user. I'll be honest with you, i don't know the best way to do this, but i do it by using the after psuedo element as the underline. I position it below the word by making it display block, then i give it a width of 0. When its hovered it'll have full width and a border which will be our line.

h1::after {
  content: "";
  width: 0px;
  transition: 0.4s;
  display: block;
}

h1:hover::after {
  width: 100%;
  border: solid 0.5px;
}

Descriptions

A hover effect you must've seen before is description hover effects. It's when something hovers, a description comes up either in front of or next to it. Unsplash for example gives a small description of who made the picture and if they're available for hire, while also showing that you can download it. Description hover effects can come in different shapes and sizes, but here's an example i made: The first one was made by a div in the french toast div that appeared when its hovered. The second one was made with a before psuedo element thats shown when the word is hovered.

.hoverDiv {
  width: 250px;
  height: 250px;
  border-radius: 8px;
  background-image: url("https://images.unsplash.com/photo-1484723091739-30a097e8f929?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=749&q=80");
  background-size: cover;
  overflow: hidden;
}

.desc {
  opacity: 0%;
 backdrop-filter: brightness(35%);
  background-image: red;
  color: white;
  height: 60%;
  transform: translateY(85%);
  transition: 0.3s;
}

.hoverDiv:hover > .desc {
  opacity: 100%;
}

.word:before {
  content: 'To enjoy pleasuere of';
  display: block;
  background-color: gray;
  color: white;
  font-size: 15px;
  margin-left: 30px;
  padding: 3px;
  border-radius: 3px;
  filter: opacity(0%);
  transition: 0.3s;
}

.word:hover::before {
  filter: opacity(100%);
}

All 4 of these hover effects are commonly used around web devloping, which is why its important for begginers to learn these! If you have any other hover effects i should add please comment them, other than that have a great day/night 👋.