CSS 实现鼠标悬浮图片上，图片放大效果

王_lin

于 2024-12-10 17:36:16 发布

阅读量895

点赞数 3

分类专栏： vue 文章标签： css javascript css3

本文链接：https://blog.csdn.net/csdn_bk/article/details/144377826

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

先看效果

在这里插入图片描述

方法一设置固定像素方式

 <div class="cla">
	<img src="./img.jpg" alt="">
 </div>
 <style lang="less">
	.cla {
		  border: 1px solid red;
		  width: 200px;
		  height: 200px;
		  overflow: hidden;
		  // 设置弹性盒子 保证图片居中
		  display: flex;
		  justify-content: center;
		  align-items: center;
		
		  img {
		    width: 200px;
		    height: 200px;
		    transition: all 0.2s;
		    
		    &:hover {
		      width: 220px;
		      height: 220px;
		    }
		  }
		}
 <style>

方法二 transform:scale()方式

 <div class="cla2">
	<img src="./img.jpg" alt="">
 </div>
 <style lang="less">
	.cla2 {
	  border: 1px solid red;
	  width: 200px;
	  height: 200px;
	  margin: 100px auto;
	  overflow: hidden;
	
	  &>img {
	    width: 100%;
	    height: 100%;
	    // 设置比例
	    transform: scale(1);
	    transition: all 1s;
	
	    &:hover {
	      // 放大比例
	      transform: scale(1.2);
	    }
	  }
	}
</style>

方法三背景图片设置方式

 <div class="cla3"> </div>
 <style lang="less">
	.cla3 {
	  border: 1px solid red;
	  width: 400px;
	  height: 400px;
	  margin: 100px auto;
	  // 设置背景图片
	  background-image: url('@/assets/1234.png');
	  background-size: 100%;
	  background-position: 50% 50%;
	  transition: all 1s;
	
	  &:hover {
	    background-size: 120%;
	  }
	}
 </style>