鼠标悬停图片内部放大效果(正常盒子和弹性布局盒子两种)

正常盒子:

直入主题,看效果:

思路:

1.实现放大效果,一般都用transform: scale(倍数)

2.因为内部放大,那么溢出的部分就得隐藏,因此我们可以给img图片包一个父盒子,给父盒子设置和img图片一样的宽高,然后设置溢出隐藏overflow:hidden;

3.最后加一下过渡动画就行了

代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .img-box {
        width: 200px;
        height: 200px;
        overflow: hidden;
      }
      img {
        width: 200px;
        height: 200px;
        transition: all 0.5s;
      }
      img:hover {
        transform: scale(1.1);
      }
    </style>
  </head>
  <body>
    <div class="img-box">
      <img src="./eat.jpg" alt="" />
    </div>
  </body>
</html>

弹性盒子:

新手刚做项目的时候,可能会出现下面的错误效果(我就是):

要实现的效果是:一个div盒子,里面有img和span两个标签,上下居中分布,因为整体用的弹性布局,所以一开始这样写的:

因为弹性布局中间还有空间,所以图片放大会往下走

解决方法:给img在包一个div,在把溢出隐藏设置在这个div上就可以了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 200px;
        height: 250px;
      }
      .img-box {
        width: 200px;
        height: 200px;
        overflow: hidden;
      }
      img {
        width: 200px;
        height: 200px;
        transition: all 0.5s;
      }
      img:hover {
        transform: scale(1.1);
      }
    </style>
  </head>
  <body>
    <div class="item">
      <div class="img-box">
        <img src="./eat.jpg" alt="" />
      </div>
      <span>吃饭</span>
    </div>
  </body>
</html>

效果:

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现鼠标悬停图片放大效果,可以通过以下几种方式: 1. 使用CSS transform属性 可以使用CSS的transform属性来实现图片放大效果。将图片的缩放比例设为1.2或其他比例,当鼠标悬停图片上时,将缩放比例改为1或原来的比例。 示例代码: ```html <style> .img-zoom { transition: transform .2s; } .img-zoom:hover { transform: scale(1.2); } </style> <img src="image.jpg" class="img-zoom"> ``` 2. 使用JavaScript和CSS 通过JavaScript来改变图片的样式,实现图片放大效果。当鼠标悬停图片上时,将图片的宽高增加一定比例,当鼠标移开时,将图片宽高恢复到原来的大小。 示例代码: ```html <style> .img-zoom { transition: width .2s, height .2s; } </style> <img src="image.jpg" class="img-zoom" onmouseover="zoomIn(this)" onmouseout="zoomOut(this)"> <script> function zoomIn(img) { img.style.width = (img.clientWidth * 1.2) + "px"; img.style.height = (img.clientHeight * 1.2) + "px"; } function zoomOut(img) { img.style.width = ""; img.style.height = ""; } </script> ``` 3. 使用jQuery插件 可以使用一些开源的jQuery插件来实现图片放大效果,比如zoom.js、fancybox等。 使用zoom.js实现图片放大效果的示例代码: ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script> <img src="image.jpg" data-zoom-image="image-large.jpg"> <script> $('img').zoom(); </script> ``` 以上是实现鼠标悬停图片放大的几种方式,可以根据实际需求选择适合的方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值