CSS photo gallery with zoom on click, simple-CodePudding

I want to do a simple photo gallery that when you click on a photo it is displayed bigger. I want it to be pure CSS and also no complications in the HTML code, just a div wrapping the images. Up to now the best I could achieve:

.photo-galery-with-zoom {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: equally-spaced;
    
}

.photo-galery-with-zoom img {
    max-height: 19vh;
    margin: 5px;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: white;
    transition: filter .2s;
}

.photo-galery-with-zoom img:hover:not(:active) {
    filter: drop-shadow(0 0 4px black);
}

.photo-galery-with-zoom img:active {
    position: fixed;
    top: 0;
    max-width: 88vw;
    max-height: 88vh;
    z-index: 99999;
    transition: 0s;
}

<div class="photo-galery-with-zoom">
<image src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/lionel-animals-to-follow-on-instagram-1568319926.jpg?crop=0.922xw:0.738xh;0.0555xw,0.142xh&resize=640:*"></image>
<image src="https://www.boredpanda.com/blog/wp-content/uuuploads/cute-baby-animals/cute-baby-animals-2.jpg"></image>
<image src="https://i.pinimg.com/736x/a7/c6/55/a7c65551c76a4870e9c9082d05750658.jpg"></image>
</div>

I would like to be able to keep the zoom without holding the mouse button, and also without mouse hover. What I want is "click→zoom, click again→unzoom". Is it possible?

CodePudding user response：

Here's a slightly simplified version of your code but putting an input checkbox on top of each image.

When the checkbox (albeit invisible with opacity 0) is clicked this can affect the immediately following img element using the input:clicked img selector. Both the img and the checkbox are then expanded to cover everything so when clicked on again the :checked state disappears and it all goes back to its initial state.

Obviously you will want to work on exactly how big you want everything to be as one of the other things this snippet does is have fixed size for each image's place and makes sure the entire image can be seen by using object-fit contain.

.photo-galery-with-zoom {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: equally-spaced;
}

.photo-galery-with-zoom label {
  position: relative;
}

.photo-galery-with-zoom img {
  height: 19vh;
  width: 19vh;
  object-fit: contain;
}

.photo-galery-with-zoom input:checked img {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  background: white;
  object-fit: contain;
}

.photo-galery-with-zoom input {
  width: 19vh;
  height: 19vh;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
}

.photo-galery-with-zoom input:checked {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

<div class="photo-galery-with-zoom">
  <label>
    <input type="checkbox" name="galery" onclick="event.stopPropagation();"/>
    <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/lionel-animals-to-follow-on-instagram-1568319926.jpg?crop=0.922xw:0.738xh;0.0555xw,0.142xh&resize=640:*">
    </label>
  <label>
    <input type="checkbox" name="galery" onclick="event.stopPropagation();"/>
    <img src="https://www.boredpanda.com/blog/wp-content/uuuploads/cute-baby-animals/cute-baby-animals-2.jpg">
    </label>
  <label>
    <input type="checkbox" name="galery" onclick=" event.stopPropagation();"/>
    <img src="https://i.pinimg.com/736x/a7/c6/55/a7c65551c76a4870e9c9082d05750658.jpg">
    </label>
</div>

CodePudding user response：

yes, take a look at this code it will zoom on hover

<html>
    <head>
        <style>
#div {
    border-radius: 3px;
    border: 2px solid black;
    transition: 0.5s;
    width: 500px;
    height: 200px;
}
#div:hover {
    transform:scale(1.2);
}

        </style>
    </head>
    <body><br><br>
        <center>
<div id="div">
    <h1>hello</h1>
</div>
</center>
    </body>
</html>