How can I incorporate CSS to expand my image on click? HTML, CSS, JAVASCRIPT

Coding Help
, ,
2

Hi!

I’m not totally sure what you’re going for here but I thought I’d chip in with a method of enlarging an image on-click with CSS only bc I think it’s neat:

HTML

<div>
  <button class="imgLink">
	<img
	  src="https://cdn.glitch.com/cb562394-de5e-45a2-a7c3-8f9f92dfcd96%2Flarge_57c96640fd8e6c5e5858158c07db0205.jpg?v=1598517670675"
	  alt="artificial lake"
	/>
  </button>

  <button class="imgLink">
	<img
	  src="https://cdn.glitch.com/cb562394-de5e-45a2-a7c3-8f9f92dfcd96%2Fa0640277725_5.jpg?v=1598518242592"
	  alt="album art"
	/>
  </button>
</div>

CSS

.imgLink { border: none; background: none; }
.imgLink img
{
  height: 8rem;
}
.imgLink:active img, .imgLink:focus img
{
  height: 16rem;
}

We put each image in an invisible button. When the button containing an image is “focussed”, (i.e it’s the last thing the user clicked) we increase the height. If the user clicks the page background or another button, it goes back to normal.

Demo Glitch: glitch.com/~bevel-funky-orca