Using Hover to zoom icone by hovering over with CSS

Asked

Viewed 157 times

0

Hello, I’m trying to get my listing animated, passing the mouse over the options (View, Edit and Delete) and I want the icon to get bigger, just to have a better view, I’m with a code, however, is not having results...

CSS used:

 .zoom{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

Structure in PHP:

      <td>
           <div class='zoom'>
           <div class='table-data-feature'>

           <a href='#' title='Visualizar' style='color:black'>
           <i class='fas fa-file-pdf' style='margin: 0 8px;'></i>
           </a>

           <a href='#' title='Editar' style='color:black'>
           <i class='zmdi zmdi-edit' style='margin: 0 8px'></i>
           </a>

           <a href='#' title='Excluir' style='color:black'>
           <i class='fas fa-power-off' style='margin: 0 8px'></i>
           </a>

           </div>
           </div>
     </td>

Simple accents as it is inside a echo...

I was able to do it with images, but not inside a while...

php html css

1 answer

2

To trigger the event hover over (Hover) you must use as follows:

{seletor}:hover {
    código css
}

In your case how you want to increase the items, not the entire list, would look like this:

 .zoom a:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

Browser other questions tagged php html css

You are not signed in. Login or sign up in order to post.