javascript - 使用 CSS 或 Javascript 放大图像

Question

我正在使用 css 和 Javascript 方法来放大页面中的图像。我使用了一些没有给我正确方法的代码。

寻求帮助，我在下面给出了我的小提琴链接

我的CSS是

 #demo {
                overflow: hidden;
                width: 120px;
                text-align: center;
                padding: 10px;
                z-index: 3;
            }

                #demo img {
                    border: none;
                    width: 100px;
                    height: 100px;
                    border: 5px solid #f4f4f4;
                    z-index: 3;
                }

            #enlarge_images {
                ;
                display: none;
                border: 5px solid #f4f4f4;
                z-index: 100;
            }

我试过这个小提琴代码

Answer 1

看看这个小提琴

工作演示

不完全确定您的 javascript 做了什么或打算做什么，但请检查一下。

CSS

 #demo img{
     width: 100px;     
     padding: 10px;
     z-index: 3;
 }
 #demo img:hover {
     border: 5px solid #f4f4f4;
    transform: scale(2.8);
      -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
     z-index: 3;
 }

HTML

<div id="demo" >
    <img src="#" />
    <img src="#" />
    <img src="#" />
</div>