CSS布局案例 10-51 定位实现图片放大效果

已于 2024-01-04 17:03:22 修改
阅读量886 收藏 5
点赞数
分类专栏： Web前端开发 文章标签： css html 前端
于 2021-05-05 23:04:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dpl12/article/details/116431874
版权

CSS3 图片放大 悬浮效果 定位 鼠标悬停
关键词由CSDN通过智能技术生成

文章目录

前言

使用css3定位实现图片放大效果。

实现过程

1.步骤

定位实现图片放大效果的步骤:
	  1、上中下三部分，上部分为标题，中间为相框，底部为版权文字
	  2、相框使用图片，鼠标悬停时放大该图片。放大的图片为另一个图片（图片相同），使用定位的方式设置放大的图片样式。
	  3、底部版权文字，注意父容器的高度塌陷问题。

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.listBox{
				width: 620px;
				margin: 50px auto;
			}
			.listBox h3{
				font-size: 17px;
				color: #a53333;
				text-align: center;
				border-bottom: 2px #CCCCCC dashed;
				font-weight: 300;
				padding-bottom: 5px;
			}
			.pic img{
				width: 100px;
				height: 75px;
				border: 1px #CCCCCC solid;
				padding: 2px;
				background: #FFFFF;
				/* 图片默认向下撑大3px,换成块元素解决 */
				display: block;
			}
			.pic{
				border: 1px #bbbbbb solid;
				padding: 5px;
				width: 106px;
				background: #EEEEEE;
				float: left;
				margin: 3px;
			    position: relative;
			}
			.list{
				margin-top: 10px;
			}
			/* 放大的图片设置定位样式。 */
			.pic img:nth-of-type(2){
				/* 初始隐藏 */
				display: none;
				width: 200px;
				height: 150px;
				position: absolute;
				top: -25px;
				left: -25px;
				/* 显示在上层 */
				z-index: 88;
			}
			.pic:hover img:nth-of-type(2){
				/* 鼠标悬停时放大图片 */
				display: block;
				border: 1px #000000 solid;
			}
			.listBox p{
				text-align: center;
				font-size: 17px;
				color: #777;
				margin-top: 10px;
			}
			/* 设置空元素添加浮动清理clear:both,来解决高度塌陷 */
			.clear{
				clear: both;
			}
			/* 
			解决高度塌陷的方式:
			1、给父元素添加overflow:hidden;缺点:不适合和定位一起用
			2、给所有浮动元素的后面添加一个空元素,并设置其浮动清理clear:both 
			*/
		</style>
	</head>
	<body>
		<div class="listBox">
			<h3>HoverBox Image Gallery</h3>
			<div class="list">
				<div class="pic">
					<img src="../img/bjj.jpg" />
					<!-- 第二个为放大图片 -->
				    <img src="../img/bjj.jpg" />
				</div>
				<div class="pic">
					<img src="../img/Seychelles_003.JPG" />
					<img src="../img/Seychelles_003.JPG" />
				</div>
				<div class="pic">
					<img src="../img/背景.jpg" />
					<img src="../img/背景.jpg" />
				</div>
				<div class="pic">
					<img src="../img/路飞.jpeg" />
					<img src="../img/路飞.jpeg" />
				</div>
				<div class="pic">
					<img src="../img/娜美.jpeg" />
					<img src="../img/娜美.jpeg" />
				</div>
				<div class="pic">
					<img src="../img/沙滩.jpg" />
					<img src="../img/沙滩.jpg" />
				</div>
				<div class="pic">
					<img src="../img/山治.jpg" />
					<img src="../img/山治.jpg" />
				</div>
				<div class="pic">
					<img src="../img/众人.jpeg" />
					<img src="../img/众人.jpeg" />
				</div>
				<div class="pic">
					<img src="../img/th.jpg" />
					<img src="../img/th.jpg" />
				</div>
				<div class="pic">
					<img src="../img/th%20(1).jpg" />
					<img src="../img/th%20(1).jpg" />
				</div>
				<div class="pic">
					<img src="../img/th%20(2).jpg" />
					<img src="../img/th%20(2).jpg" />
				</div>
				<div class="pic">
					<img src="../img/th%20(3).jpg" />
					<img src="../img/th%20(3).jpg" />
				</div>
				<div class="pic">
					<img src="../img/seychelles-voyage-decouverte.jpg" />
					<img src="../img/seychelles-voyage-decouverte.jpg" />
				</div>
				<div class="pic">
					<img src="../img/hhh.jpg" />
					<img src="../img/hhh.jpg" />
				</div>
				<div class="pic">
					<img src="../img/AP78907278_Seychelles_Trave-xlarge.jpg" />
					<img src="../img/AP78907278_Seychelles_Trave-xlarge.jpg" />
				</div>
				<div class="pic">
					<img src="../img/Anse-Source-dArgent.jpg" />
					<img src="../img/Anse-Source-dArgent.jpg" />
				</div>
				<div class="pic">
					<img src="../img/timg.jfif" />
					<img src="../img/timg.jfif" />
				</div>
			</div>
			<div class="clear"></div>
			<p>2021年@版权所有</p>
		</div>
	</body>
</html>

3.效果

在这里插入图片描述

一醉南柯
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML css图片放大效果
05-30
HTML css图片放大效果，鼠标放在图片上后图片放大，离开后缩小
css实现图片放大
weixin_51490430的博客
05-24 1618
css实现图片放大 <template> <div class="div"> <img src="../assets/logo.png" alt="" /> </div> </template> <style scoped > .div { width: 249px; height: 242px; border: 1px solid #00
如何使用CSS和JS实现鼠标移动到图片上的时候实现图片的放大和缩小效果。
最新发布
emmmaha的博客
05-23 646
替换为您实际的图片路径，以及根据需要调整放大倍数和过渡效果的时间。这样，当鼠标移动到图片上方时，图片就会放大显示。您可以使用CSS和JavaScript结合实现当鼠标移动到图片上方时，让图片放大的效果。的样式，确保图片放大后不会溢出容器。然后对图片设置了过渡效果。将图片放大1.2倍（实现缩小可将数值定在(0,1)内）。在上面的示例中，我们首先创建了一个包含图片的。，当鼠标悬停在容器上时（即。
CSS图片放大效果
07-11
一个CSS文档，可以在网页上放大图片，类似于淘宝店面的宝贝展示效果
css实现图片放大效果
热门推荐
吴清钺的博客
06-03 3万+
放大后放大前css动画效果，感觉transition和transform真的很强大。transform本质上是一系列变形函数。具有很多属性。transition从效果上看是一种平滑过渡的动画，本质上是在线性时间内将属性从开始值过渡到结束值。涉及到时间。对与transition的讲解点击打开链接对于transform点击打开链接&lt;!DOCTYPE html&gt; &lt;html lang=...
用CSS3实现对图片的放大效果
十三狼的专栏
06-27 872
 用CSS3实现对图片的放大效果 用CSS3对图片放大效果 .right_div .topicons li a:hover img{     -webkit-transform:scale(1.5,1.5);     -moz-transform:scale(1.5,1.5);     -transform:scale(1.5,1.5);     }      
纯CSS实现商品图片点击放大效果
09-24
总结来说，纯CSS实现商品图片点击放大效果主要依赖于CSS的布局、定位、伪类和透明度属性。通过精心设计和组合这些元素，可以在不使用JavaScript的情况下创建一个功能完善的图片预览功能，提升用户的浏览体验。
纯CSS实现图片列表悬停放大效果的方法
09-25
主要为大家介绍了纯CSS实现图片列表悬停放大效果的方法,涉及css中a:hover属性的使用技巧,非常具有实用价值,需要的朋友可以参考下
CSS3实现五点式图片放大镜.zip
07-11
这通常通过绝对定位和相对定位实现，同时考虑响应式设计，使布局在不同设备和屏幕尺寸下保持合理。 3. **CSS3选择器与伪类**：利用`:hover`伪类，当鼠标悬停在热点区域上时，触发放大镜效果。可能还需要用到其他...
用纯css3实现的图片放大镜特效效果非常不错
09-25
【纯CSS3图片放大镜特效实现详解】 在网页设计中，图片放大镜特效是一种常见的交互方式，它能够为用户提供更直观、细致的查看细节的能力。本文将深入解析如何使用CSS3来实现这样的功能，无需JavaScript或者其他复杂...
利用css实现图片放大缩小
m0_63701303的博客
02-22 1897
利用css实现图片放大缩小
纯CSS3实现的图片放大缩小
12-18
纯CSS3实现的图片放大缩小效果
图片局部放大效果JS+CSS
05-19
图片局部放大效果JS+CSS 图片局部放大效果JS+CSS
CSS3实现图片动态渐变放大缩小的性感效果
06-12
鼠标悬停，图片动态放大缩小。IE 下效果不佳，建议在支持CSS3浏览器的浏览，例如FF等
css 实现鼠标悬停放大图片
05-06
html css 实现鼠标悬停放大图片
CSS小案例4：用定位实现图片在原位置的居中放大显示
qq_36722545的博客
07-22 1827
当鼠标滑上去，给滑到的图片做相对定位，向左移动图片初始宽度一半的大小，向上移动初始图片宽度一半的大小 demo： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin: 0; padding:0...
css怎么把图片扩大,纯css创意图片放大
weixin_29765949的博客
08-03 1380
.gallery {list-style:none;}.gallery:before,.gallery__item:last-child {position:fixed;top:50%;left:50%;margin:-31.25em;width:62.5em;height:62.5em;}.gallery:before {z-index:-1;border-radius:50%content:'...
html+css实现图片缓慢变大效果
jakelihua
04-24 2419
本文讲解如何使用html+css实现让图片缓慢变大的效果。
Css中图片局部放大,将图片中局部放大效果
weixin_39922929的博客
08-03 785
刚毅87我不清楚你的 bug, 我自己写了一份,你可以参考一下html>*{margin:0;padding:0;}#wrap{/*此处尺寸改为你图片的大小,画板也是如此width:478px;height:665px;/*border:1pxsolidred;*/margin:50pxauto;overflow:hidden;position:relative;}#w...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值