change image size on hover

Question

I'm trying to add a hover function to some images on our company website. The problem is i need this for many pictures (product pictures) but not all (icons and such) and i need very simple implementation because the content will be handled by someone who knows even less about programming than myself.

I've found a very neat solution with

img:hover,
img:focus{
  width:192px;
  height: 136px;
}

but this (of course) adds the hover function to all images, including PDF icons and so on. Is there an easy way i can specify which images (first column of the table) have a hover option? Because this solution would be great, as the marketing guy can simply implement the products as he's used to.

Or maybe there is an other easy to use solution?

Answer 1

Is there an easy way i can specify which images (first column of the table) have a hover option?

Here is an example

tr td:first-child img{
  transition: .2s;
}
tr td:first-child img:hover{
  transform: scale(1.1);
}

<table>
  <tr>
    <td><img src="http://via.placeholder.com/50x50"></td>
    <td><img src="http://via.placeholder.com/100x50"></td>
  </tr>
  <tr>
    <td><img src="http://via.placeholder.com/50x50"></td>
    <td><img src="http://via.placeholder.com/100x50"></td>
  </tr>
</table>

transition: it lets the transform in the image softer

transform scale: instead of using width and height you can use this property to increases the image's scale

:first-child it is applied just for the first child element, doens't matter what is the element, if the first child is a td tag, it will do nothing to any element, you can use nth-of-type, nth-child or first-of-type