HTML Hover icon

Question

I'm designing a very basic website only with HTML and CSS. In the design, I added some icons, which are images. These images I've added them in my HTML. I want to create a hover effect with another image. Any thoughts?

Here is my HTML and CSS

.icon-group {
 width: 100%;
 margin: 0 auto;
 text-align: center;
 padding-bottom: 15px;

}

.view-icon,
.edit-icon,
.delete-icon {
 width: 50px;
 height: 50px;
 display: inline-block;
 padding: 10px;
}

<div class="card one">
   <img class="avatar" src="images/avatar-01.jpg" alt="Foto Felipe Kaiser">
   <p class="name">Felipe Kaiser</p>
   <p class="position">Periodista</p>
   <hr>
   <div class="icon-group">
    <div class="view-icon">
     <a href="#">
      <img src="images/view-icon.png" alt="Icono ver">
     </a>
    </div>
    <div class="edit-icon">
     <a href="#">
      <img src="images/edit-icon.png" alt="Icono editar">
     </a>
    </div>
    <div class="delete-icon">
     <a href="#">
      <img src="images/delete-icon.png" alt="Icono delete">
     </a>
    </div>
   </div>
  </div>

Look up css hover selector to find out how to do that. This codepen here has a whole bunch of live examples you can study, understand, then tweak it into your own project --> https://codepen.io/IanLunn/pen/hysxc — Iskandar Reza, Jan 12 '18 at 19:05
Please do your research. There are many many tutorials online that can help you here. — davvv, Jan 12 '18 at 19:07
Possible duplicate of [CSS: image link, change on hover](https://stackoverflow.com/questions/4717117/css-image-link-change-on-hover) — Stephen P, Jan 12 '18 at 19:15

score 0 · Answer 1 · answered Jan 12 '18 at 19:05

To add a different behaviour of css while hovering any item, you have to define this behaviour and add :hover to the container id/class. In your exemple, it may be :

.icon-group {
width: 100%;
margin: 0 auto;
text-align: center;
padding-bottom: 15px;
}

.icon-group:hover {
background-color: grey;
}

for exemple

HTML Hover icon

1 Answers1