How to transform image on click instead of hover

Question

I have a simple image gallery using CSS that when the user hovers over the thumbnail image, it is transformed, scaled, and rotated.

Here is an example using JS Fiddle: Example

.container { overflow:auto;height:800px; }
.container img { transition: all 1s; box-shadow: -3px 1px 5px rgba(0,0,0,.5); }
div.container table { margin-top: 85px; }
div.container table th { text-align:center; }
div.container table td:first-child { text-align:center; }
div.container table td:first-child + td { text-align:center; }
div.container table tr:first-child + tr { text-align:center; }
div.container table tr:first-child + tr td { padding:10px; }
div.container table td img { width:40%; }        
div.container img:hover { transform: scale(3.0) rotate(-10deg) }

<div class="container">
    <table border="0">
        <tr>
            <th width="20%">Image Width</th>
            <th width="20%">Image Height</th>
            <th width="20%">Location</th>
            <th width="20%">Internal Notes</th>
            <th width="20%">External Notes</th>
        </tr>
        <tr>
            <td>10.5"</td>
            <td>12.75"</td>
            <td>Left Hip</td>
            <td>Heat Transfer - 49/51</td>
            <td>Fine details in artwork will diminish.</td>
        </tr>                             
        <tr>
            <td></td>
            <td colspan="2"><img src="https://i.postimg.cc/Tw4H40yY/thumbnail-27d67c5eb4-221900-blackhemtag-flat-221900.jpg"></td>
            <td colspan="2"><img src="https://i.postimg.cc/VLRHyz0V/thumbnail-32136cc21e-221900-blackhemtag-thumb-221900.jpg"></td>
        </tr>                                        
    </table>
</div>

Instead of the image transformation happening when the user hovers over the image, I'd like to change it so the image is transformed when the user clicks on the image. However, I don't believe CSS has a way to track click events.

I'm trying to figure out the simplest approach to change from image hover to image click. Everything else should stay the same. The only change I'm trying to make is have the image transformation happen when the user clicks the thumbnail image instead of having it happen when the user hovers over the image. Any suggestions on how to accomplish this?

Answer 1

Well the easiest way is to replace CSS hover with active but once the image expands there’s no way for it to deflate back to normal again ...

div.container img:active { transform: scale(3.0) rotate(-10deg); }

Unless you add the deflation in its main CSS...

div.container table td img { width:40%; transform: scale(1) rotate(0deg);}

Alternatively JS comes to the rescue with which you can easily add such functionality directly on your HTML elements...

onmousedown="this.style.transform='scale(3.0) rotate(-10deg)';" 

onmouseout="this.style.transform='scale(1) rotate(0deg)';"

So the end result will now look like this...

<img onmousedown="this.style.transform='scale(3.0) rotate(-10deg)';" onmouseout="this.style.transform='scale(1) rotate(0deg)';" src="https://i.postimg.cc/Tw4H40yY/thumbnail-27d67c5eb4-221900-blackhemtag-flat-221900.jpg">

Both methods are fine so choose whichever pleases you. CSS looks the easiest.

Answer 2

You can set the transform on a specific class instead of the :hover pseudo class.

div.container img.transformed { transform: scale(3.0) rotate(-10deg) }

Then, you can attach a click event listener to the container that adds that class when an image is clicked.

document.querySelector('.container').addEventListener('click', e => {
    if (e.target.matches('img')) e.target.classList.add('transformed');
});

You can use .classList.toggle instead of .add to remove the transform when clicking on an already transformed image.

Answer 3

However, I don't believe CSS has a way to track click events.

In fact, CSS do have such a method. It's not perfect, but in this case it may be of use to you.

First, wrap each <img> in a <label> and put a <input type="checkbox"> before it:

<label>
  <input type="checkbox">
  <img src="https://i.postimg.cc/Tw4H40yY/thumbnail-27d67c5eb4-221900-blackhemtag-flat-221900.jpg">
</label>

Then, change the :hover rule to this:

input:checked + img {
  transform: scale(3.0) rotate(-10deg);
}

Do remember to hide those checkboxes:

input[type="checkbox"] {
  display: none;
}

Once a checkbox is :checked via the corresponding <label>, the <img> lies next to it will be transformed.

Try it:

input[type="checkbox"] {
  display: none;
}

input:checked + img {
  transform: scale(3.0) rotate(-10deg);
}

/* Original styles */

.container {
  overflow: auto;
  height: 800px;
}

.container img {
  transition: all 1s;
  box-shadow: -3px 1px 5px rgba(0, 0, 0, .5);
}

div.container table {
  margin-top: 85px;
}

div.container table th,
div.container table td:first-child,
div.container table td:first-child + td,
div.container table tr:first-child + tr,
div.container table tr:first-child + tr td {
  text-align: center;
}

div.container table td img {
  width: 40%;
}

<div class="container">
  <table border="0">
    <tr>
      <th width="20%">Image Width</th>
      <th width="20%">Image Height</th>
      <th width="20%">Location</th>
      <th width="20%">Internal Notes</th>
      <th width="20%">External Notes</th>
    </tr>
    <tr>
      <td>10.5"</td>
      <td>12.75"</td>
      <td>Left Hip</td>
      <td>Heat Transfer - 49/51</td>
      <td>Fine details in artwork will diminish.</td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2">
        <label>
          <input type="checkbox">
          <img src="https://i.postimg.cc/Tw4H40yY/thumbnail-27d67c5eb4-221900-blackhemtag-flat-221900.jpg">
        </label>
      </td>
      <td colspan="2">
        <label>
          <input type="checkbox">
          <img src="https://i.postimg.cc/VLRHyz0V/thumbnail-32136cc21e-221900-blackhemtag-thumb-221900.jpg">
        </label>
      </td>
    </tr>
  </table>
</div>