鼠标经过--图片切换

最新推荐文章于 2022-11-12 13:01:26 发布

奋斗的小菇凉

最新推荐文章于 2022-11-12 13:01:26 发布

阅读量121

点赞数

分类专栏： css

blank

本文链接：https://blog.csdn.net/qq_41418797/article/details/107695793

版权

css 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片切换</title>
		<style>
			*{
				padding: 0px;
				margin: 0px;
			}
			body{
				background-color:gainsboro;
				margin: 20px;
			}
			#box{
				width: 810px;
				height: 420px;
				overflow: hidden;
				box-shadow: 0 0 0 30px transparent;
			}
			#img{
				position:relative;
				float: left;
				height: 420px;
				width: 160px;
				-webkit-transition: all 0.3s ease-in-out;
    			-moz-transition: all 0.3s ease-in-out;
    			-o-transition: all 0.3s ease-in-out;
    			-ms-transition: all 0.3s ease-in-out;
    			transition: all 0.3s ease-in-out;
				border:1px solid white;
			}
			#box #img span
			{
				height: 80px;
				width:160px;
				font-size:19px ;
				color: white;
				background:black;
				opacity: 0.5;
				line-height: 80px;
				text-align: left;
				position:absolute;
				left:0px;
				top: 360px;
				overflow: hidden;
				transition-duration:0.5s;
			}
			#box:hover #img{
				width: 40px;
			}
			#box #img:hover{
				width: 640px;
			}
			#box #img:hover span{
				width:640px;
				transition-duration:0.5s;
			}
		</style>
	</head>
	<body>
		
		<div id="box">
			<div id="img"><img src="img/1.jpg" alt=""><span>来来来</span></div>
			<div id="img"><img src="img/2.jpg" alt=""><span>啦啦啦</span></div>
			<div id="img"><img src="img/3.jpg" alt=""><span>Keep</span></div>
			<div id="img"><img src="img/4.jpg" alt=""><span> Smile</span></div>
			<div id="img"><img src="img/5.jpg" alt=""><span>Keep Smile.First</span></div>
		</div>

	</body>
</html>

奋斗的小菇凉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
鼠标经过--图片切换

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>图片切换</title> <style> *{ padding: 0px; margin: 0px; } body{ background-color:gainsboro; margin: 20px; } #box{ wi.
复制链接

扫一扫

专栏目录