0
0 Comments

I’ve tried several css tricks:inline-block (tradional way) css flexbox method css grid method display: table method float property, but none of them worked, even using margin and padding doesn’t work, here is my css and html

			
.click-zoom input[type=checkbox] {
  display: none;
}

.click-zoom img {
  margin: 100px;
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

.click-zoom input[type=checkbox]:checked~img {
  transform: scale(2.5);
  cursor: zoom-out
}


			
<section id="work" style="padding-left: 10%; padding-bottom: 5%; padding-right: 10%; ">
  <h1 class="display-1 title" style="color: black;">My work</h1>


  <div class="click-zoom">
    <label>
            <input type="checkbox">
            <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" style="width: 20%;">
          </label>
  </div>

  <div class="click-zoom" style="margin-left: 50%; padding-bottom: 60%;">
    <label>
            <input type="checkbox">
            <img src="https://images.unsplash.com/34/BA1yLjNnQCI1yisIZGEi_2013-07-16_1922_IMG_9873.jpg?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80" style="width: 20%;">
          </label>
  </div>

</section>

Anonymous Asked question May 13, 2021