css实现图片放大

南天*

于 2021-05-24 15:25:50 发布

阅读量1.6k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_51490430/article/details/117224457

版权

这篇博客介绍了如何利用CSS的`transition`和`transform`属性，配合`:hover`伪类，轻松实现图片鼠标悬停时的放大效果。通过设置`.div`的样式限制图片大小，并在`.divimg:hover`状态下应用`transform: scale(1.8)`实现平滑的缩放动画。

摘要由CSDN通过智能技术生成

css实现图片放大

<template>

    <div class="div">
      <img
        src="../assets/logo.png"
        alt=""
      />
    </div>

</template>
<style scoped >
.div {
  width: 250px;
  height: 250px;
  border:   1px  solid #000 ;
  margin: 100px auto;
  overflow: hidden;
}
.div img {
  cursor: pointer;
  transition: all 0.6s;
  width: 100%;
  height: 100%;
}
.div img:hover {
  transform: scale(1.8);
}
</style>