CSS小案例4：用定位实现图片在原位置的居中放大显示

最新推荐文章于 2023-12-26 18:28:35 发布

小佬呀

最新推荐文章于 2023-12-26 18:28:35 发布

阅读量1.7k

点赞数 1

分类专栏： HTML 文章标签：图片在原位置放大显示图片定位 css实现图片放大显示

本文链接：https://blog.csdn.net/qq_36722545/article/details/96903759

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述
当鼠标滑上去，给滑到的图片做相对定位，向左移动图片初始宽度一半的大小，向上移动初始图片宽度一半的大小
demo：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
			*{
				margin: 0;
				padding:0px;
			 }
		.box div img{
			width: 100px;
			height: 75px;

		}
		.box div{
		   float:left;
		   width: 100px;
		   height: 75px;
		   border:3px solid #eee;/*记得给初始的div加上宽高，不能让默认的图片大小撑起来，若不设，当图片设置了定位就是脱离文档流了，没有宽高*/
		   text-align: center;
		}
		.box{
			width: 600px;
			height: 300px;
			 margin: 100px auto;	
		}
		.box div:hover img{
			width: 200px;
			height: 150px;
			position: relative;
		    margin-top:-37.5px;
		    margin-left: -50px;
		   border:2px solid #ccc;
		}

	</style>
}
</head>
<body>
  <div class="box">
		<div><img src="img/photo01.jpg"></div>
		<div><img src="img/photo02.jpg"></div>
		<div><img src="img/photo03.jpg"></div>
		<div><img src="img/photo04.jpg"></div>
		<div><img src="img/photo05.jpg"></div>
		<div><img src="img/photo06.jpg"></div>
		<div><img src="img/photo07.jpg"></div>
		<div><img src="img/photo08.jpg"></div>
		<div><img src="img/photo09.jpg"></div>
		<div><img src="img/photo10.jpg"></div>
		<div><img src="img/photo11.jpg"></div>
		<div><img src="img/photo12.jpg"></div>
		<div><img src="img/photo13.jpg"></div>
		<div><img src="img/photo14.jpg"></div>
		<div><img src="img/photo15.jpg"></div>
		<div><img src="img/photo16.jpg"></div>
		<div><img src="img/photo17.jpg"></div>
		<div><img src="img/photo18.jpg"></div>
		<div><img src="img/photo19.jpg"></div>
		<div><img src="img/photo20.jpg"></div>
	</div>
</body>
</html>

小佬呀

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS小案例4：用定位实现图片在原位置的居中放大显示

当鼠标滑上去，给滑到的图片做相对定位，向左移动图片初始宽度一半的大小，向上移动初始图片宽度一半的大小demo：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ margin: 0; padding:0...
复制链接

扫一扫