0

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?

2
  • 2
    Can you show the html? It's difficult for me to help with this information. Mar 7, 2018 at 16:43
  • There is only one way to answer this: seeing your HTML markup. Add your HTML of that part you want to change.
    – ata
    Mar 7, 2018 at 17:11

4 Answers 4

8

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

4

The best way is to add a custom class to your images in which you want the hover effect and use this class to change the css

img.custom:hover,
img.custom:focus {
  width: 192px;
  height: 136px;
}
<img class="custom" src="http://via.placeholder.com/50x50"><br>
<img src="http://via.placeholder.com/50x50"><br>
<img src="http://via.placeholder.com/50x50">

5
  • Sorry to reopen this and bother you again. Like I said, yesterday everyhing worked just fine. We started to implement the products and in the evening it still worked. And today, the hover just streches the image (changes height, but not width). I haven't touched the design, and my boss hasn't either, so i have no idea where to look.
    – Danini
    Mar 9, 2018 at 11:51
  • @Danini what do you mean by streches
    – Bhuwan
    Mar 9, 2018 at 11:53
  • Oh that's fast. I just edited my answer. Do you need any further information?
    – Danini
    Mar 9, 2018 at 11:53
  • @Danini probably you did some changes in the css...so try to see the changes you have done from yesterday in the css...
    – Bhuwan
    Mar 9, 2018 at 11:59
  • Pretty sure i haven't, don't know about others. Thank you, i'll try and find a way to restore yesterdays safe.
    – Danini
    Mar 9, 2018 at 12:15
2

a simple example for changing an image's size and opacity using HTML:

<style> 
    img
    {
        opacity: 0.25;
    }

    img:hover
    {
        opacity: 1.0;
    }
    img.custom:hover,
    img.custom:focus 
    {
        transition: .2s;
        transform: scale(1.15);
    }
</style>
0

Give the images that you would like to use this on a class in your html eg.

<img href="images/img.jpg"class="grow-big" alt=".."> 

then use this in your css on that specific class:

.growbig:hover, .growbig:focus {width:192px;height: 136px;}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.