css 移入div后图片放大后的效果

最新推荐文章于 2024-05-23 10:56:36 发布

搬砖的痛苦谁知道

最新推荐文章于 2024-05-23 10:56:36 发布

阅读量752

点赞数 3

分类专栏： css 文章标签： css 动画鼠标移入效果

本文链接：https://blog.csdn.net/wxz980927155/article/details/85108762

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

达到的效果：
1.鼠标移入div后图片和文字开始放大并且不撑破div容器
2.鼠标移开div后恢复正常

html代码片段

<div onclick="toAct(1)" class="col-md-3">
	<div class="move">
		<img class="dateImg" src="../img/monday.jpg"/>
		<span class="date1">周一</span>
		<span class="date1_english">MONDAY</span>
	</div>
</div>
<div onclick="toAct(2)" style="background-color: #00E3E3;color: black" class="col-md-3">
	<div class="move">
		<span class="date1" style="color: black">周二</span>
		<span class="date1_english" style="color: black">TUESDAY</span>
	</div>
</div>
<div onclick="toAct(3)" class="col-md-3">
	<div class="move">
		<img class="dateImg" src="../img/wednesday.jpg"/>
		<span class="date1">周三</span>
		<span class="date1_english">WEDNESDAY</span>
	</div>
</div>
<div onclick="toAct(4)" style="background-color: #FF9D6F;" class="col-md-3">
	<div class="move">
		<span class="date1" style="color: black">周四</span>
		<span class="date1_english" style="color: black">THERSDAY</span>
	</div>
</div>

css代码

.col-md-3{
	padding: 0px;
	height: 300px;
	overflow: hidden;  /*div里面的图片或文字放大后使此容器的大小保持不变*/
}
.col-md-3 .move{
	transition: all 0.6s;/*属性改变所需要的时间*/
	width:100%;
	height: 100%;
}
.col-md-3 .move:hover{
	transform: scale(1.4);/*缩小或放大的倍数*/
}