CODEWITHSUNDEEP
htmlcss
Danini
Danini

Reputation: 33

change image size on hover

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?

Upvotes: 2

Views: 26140

Answers (4)

RocketMaker69
RocketMaker69

Reputation: 27

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>

Upvotes: 3

SpaceDogCS
SpaceDogCS

Reputation: 2968

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

Upvotes: 9

user9456922
user9456922

Reputation:

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;}

Upvotes: 1

Bhuwan
Bhuwan

Reputation: 16855

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">

Upvotes: 5

Related Questions