Zoom in and out on mouse click with CSS

前端 未结 5 566
我寻月下人不归
我寻月下人不归 2021-02-05 11:49

I want to zoom image with only CSS. The code below zooms the image when the left button of the mouse is kept pressed but I want to zoom in and out with a mouse click. How can I

5条回答
  •  时光说笑
    2021-02-05 12:08

    Let's use a trick here, an input checkbox:

    input[type=checkbox] {
      display: none;
    }
    
    .container img {
      margin: 100px;
      transition: transform 0.25s ease;
      cursor: zoom-in;
    }
    
    input[type=checkbox]:checked ~ label > img {
      transform: scale(2);
      cursor: zoom-out;
    }

提交回复
热议问题