css 实现手指上去图片放大，css实现鼠标移到图片上图片放大

电脑版发表于：2020/1/11 17:57

代码如下：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .imgcontent
        {
            width: 119px;
            height: 119px; 
			/* 防止图片放大撑开外容器 */
            overflow: hidden;
        }

        .img{
            width: 100%;
            height: 100%;          
        }

        .imgcontent:hover {
            box-shadow: 0px 0px 8px 0px #d3d3d3;
            cursor: pointer;
        }
        
        /* hover控制子元素样式。如果是使用scss可以直接放到.imgcontent:hover下级 */
        .imgcontent:hover .img {
              object-fit: cover;
              -webkit-transition: all 0.6s;
              transition: all 0.6s;
              -webkit-transform: scale(1.1);
              transform: scale(1.1);
        }

    </style>

</head>
<body>
    <div class="imgcontent">
        <img class="img" src="https://img.tnblog.net/userdata/heads/dbc68332d521436c983fbc3adc6d9c7f.jpeg" alt="">
    </div>
</body>
</html>
```

剑轩

css 实现手指上去图片放大，css实现鼠标移到图片上图片放大

{{item.title}}