Custom Hover CSS on Icon

Question

I wanted to add CSS to this email icon and once hovered over with the mouse, the icon shifts its position upward a little and from under comes a description of the icon. I have included a before hover and after picture. Any help will be appreciated

Answer 1

There are several things that you should look into that will help achieve the effect you are looking for. The first is the :hover selector:

The :hover selector is used to select elements when you mouse over them.

This allows you to apply certain styles to elements when you hover over them with the mouse.

---

The next thing I would look into is transition; this allows you to have smooth transitions between either specific states, or all states:

To create a transition effect, you must specify two things:

• the CSS property you want to add an effect to

• the duration of the effect

---

Finally, I would put some research into applying styles to child elements and classes; this SO post sums it up pretty well with a thorough issue (as does this one).

---

The snippet below will produce the effect you desire, but I would heavily recommend you study the HTML and CSS combined and how they work together. It's not the cleanest solution, but it gives you an idea of where to get started. Try playing around with the values to see what changes occur so you can learn more about what each piece is doing.

.container {
  width: 100px;
  height: 100px;
  background-color: #333;
  color: #eee;
  text-align: center;
  cursor: pointer;
}
.container i {
  width: 100%;
  position: relative;
  top: 25%;
  font-size: 1.5em;
  transition: 0.5s all;
}
.container span {
  opacity: 0;
  position: relative;
  top: 25%;
  transition: 0.5s all;
}
.container:hover i {
  top: 15%;
  font-size: 2em;
  color: #fc3;
}
.container:hover span {
  opacity: 1;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div class="container">
  <i class="fas fa-mobile icon" aria-hidden="true"></i>
  <span>Mobile</span>
</div>