html+css3,鼠标悬停图片放大，弹出卡片特效

最新推荐文章于 2025-06-03 14:47:23 发布
最新推荐文章于 2025-06-03 14:47:23 发布
阅读量3.6k 收藏 46
点赞数 3
CC 4.0 BY-SA版权
文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Infatuatedmonkey/article/details/124286187

1.效果图
鼠标悬停效果
2.源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				
			}
			body{
				background-image: url(img/bg1.jpg)  ;
				background-size: cover;
			}
			.wrap{
				width: 1200px;
				height: 440px;
				background-color: rgba(0,0,0,.6);
				margin: 150px auto;
				
			}
			.content{
				
				position: relative;/* 相对定位 */
				width: 280px;
				height: 200px;
				background-color: #A52A2A;
				overflow: hidden;
				float: left;
				margin:10px;
				
			}
			.content:hover .hide{
				bottom: 0;
			}
			.images{
				width: 300px;
				height: 200px;
				transition: .5s;
				
			}
			.content:hover .images{
				transform: scale(1.3);/* css3属性 放大 */
			}
			.hide{
				
				position: absolute;/* 绝对定位 */
				bottom: -60px;
				left: 0;
				width: 100%;
				height: 60px;
				background-color: rgba(0,0,0,.8);
				color: #FFFFFF;
				transition: .5s;/* css3动画过度效果 */
				
			}
			.h-content{
				padding: 8px;
			}
			.h-title{
				
				margin-top: 6px;
				font-size: 8px;
				
			}
			.h-img{
				border-radius: 50%;/* css3圆角属性 */
				width: 18px;
				height: 18px;
				vertical-align: middle;/* 基线对齐方式 居中 */
			}
			
		</style>
	</head>
	<body>
		
		<!-- 块元素独占一行 -->
		<div class="wrap">
			<div class="content">
				<img class="images" src="img/5.jpg" >
				<div class="hide">
					<div class="h-content">
						<h5>利尼亚</h5>
						<div class="h-title">
							<img class="h-img" src="img/10.jpg" >
							<span>111111</span>
						</div>
					</div>
				</div>
			</div>
			<div class="content">
				<img class="images" src="img/6.jpg" >
				<div class="hide">
					<div class="h-content">
						<h5>利尼亚</h5>
						<div class="h-title">
							<img class="h-img" src="img/5.jpg" >
							<span>111111</span>
						</div>
					</div>
				</div>
			</div>
			<div class="content">
				<img class="images" src="img/7.jpg" >
				<div class="hide">
					<div class="h-content">
						<h5>利尼亚</h5>
						<div class="h-title">
							<img class="h-img" src="img/7.jpg" >
							<span>111111</span>
						</div>
					</div>
				</div>
			</div>
			<div class="content">
				<img class="images" src="img/8.jpg" >
				<div class="hide">
					<div class="h-content">
						<h5>利尼亚</h5>
						<div class="h-title">
							<img class="h-img" src="img/11.jpg" >
							<span>111111</span>
						</div>
					</div>
				</div>
			</div>
			<div class="content">
				<img class="images" src="img/9.jpg" >
				<div class="hide">
					<div class="h-content">
						<h5>利尼亚</h5>
						<div class="h-title">
							<img class="h-img" src="img/12.jpg" >
							<span>111111</span>
						</div>
					</div>
				</div>
			</div>
			<div class="content">
				<img class="images" src="img/10.jpg" >
				<div class="hide">
					<div class="h-content">
						<h5>利尼亚</h5>
						<div class="h-title">
							<img class="h-img" src="img/11.jpg" >
							<span>111111</span>
						</div>
					</div>
				</div>
			</div>
			<div class="content">
				<img class="images" src="img/11.jpg" >
				<div class="hide">
					<div class="h-content">
						<h5>利尼亚</h5>
						<div class="h-title">
							<img class="h-img" src="img/12.jpg" >
							<span>111111</span>
						</div>
					</div>
				</div>
			</div>
			<div class="content">
				<img class="images" src="img/12.jpg" >
				<div class="hide">
					<div class="h-content">
						<h5>利尼亚</h5>
						<div class="h-title">
							<img class="h-img" src="img/6.jpg" >
							<span>111111</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
css 实现鼠标悬停放大图片
05-06
html css 实现鼠标悬停放大图片
html鼠标悬停图片放大
sun13212715744的博客
10-26 3998
在这个示例中，我们首先创建一个包含图片的<div>容器，给它一个固定的宽度和高度，并设置其overflow属性为hidden，以便控制图片的显示区域。然后，使用CSS来设置图片的过渡效果和在悬停时的放大效果。在鼠标悬停在图片容器上时，通过改变transform属性，将图片放大1.2倍。/* 添加过渡效果 */要在HTML中实现鼠标悬停时图片放大的效果，你可以使用CSS和JavaScript来完成。你可以将<img>标签的src属性更改为你自己的图片文件的路径，或者使用JavaScript来动态加载图片。
15种CSS3鼠标悬停图片动画特效
最新发布
zichenblog的博客
06-03 866
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>15种CSS3鼠标悬停图片动画特效</title> <style> * { margin: 0; padding: 0;
HTML 网页中 自定义图像单击或鼠标悬停时放大
hello:code I am captain
08-24 1万+
HTML 网页中 自定义图像单击或鼠标悬停时放大
HTML鼠标悬停图片置顶,鼠标悬浮图片放大
weixin_34549315的博客
06-02 2235
帮助文档上有一个案例，鼠标悬浮在图片上，图片放大。我现在想改一下放大之后图片的大小。我尝试了几个语句，都失败了。麻烦各位大佬帮帮忙。$(".x-table td").mouseover(function(e){var col=$(this).attr("col"); //获取鼠标当前所在单元格的colvar row=Number($(this).attr("row"))-1; //获取鼠标当前...
html中实现鼠标悬停放大,如何实现鼠标悬停图片放大的效果。
weixin_39733948的博客
06-03 1万+
在网页上我们经常看到鼠标悬停在一个图片上，这张图片会慢慢的放大，感觉是像放大镜放大的效果，当鼠标移开的时候，图片有恢复原来的样子，今天就实现这种效果。实现原理以思路：1，首先这是一张图片在悬停时放大也就是改变大小(宽，高)实现的。2，一张图片在放大的时候会根据其定位(如在div里面的图片会以div的左上角为基准扩大宽和高)来放大的，因此如果我们不去为图片添加相对定位并且不去调节扩大后的位置，他的放...
H5+CSS3社交媒体头像卡片特效
06-24
3. **过渡（Transitions）**：通过`transition`属性，可以平滑地改变头像卡片在鼠标悬停等事件触发时的样式，例如头像放大、颜色变化等效果。 4. **动画（Animations）**：CSS3的`@keyframes`规则可以创建复杂的...
CSS3商品介绍购物卡片布局特效
06-24
当用户将鼠标指针移动到商品卡片的图片上时，图片可能会放大、切换到另一张细节图，或者弹出一个覆盖层显示更多信息。这可以激发用户的兴趣，让他们更愿意探索商品。实现这种效果，我们可以使用CSS3的`:hover`伪类，...
CSS3创意：实现近百种图片鼠标悬停特效
从提供的文件信息来看，本主题专注于讨论利用CSS3实现图片上的鼠标悬停特效。由于CSS3带来了众多新特性，设计师和开发人员能够通过纯CSS代码来实现复杂的交互效果，而无需依赖JavaScript或其他脚本语言。 ### 知识...
一款利用css3的鼠标经过动画显示详情特效的实例教程
09-25
这个效果在用户将鼠标悬停在元素上时，会通过中间放大动画展示额外的内容，为网页添加一种吸引人的交互体验。以下是实现这一效果的关键CSS3特性与技术： 1. **选择器和伪类**： - 使用`<li>`元素作为基础结构，...
html5 图片鼠标悬停放大
weixin_34301132的博客
06-06 2792
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS3鼠标悬停图片放大效果，hover效果！
09-10
本案例由小码农前端导航提供，xmn-xdm.com CSS3鼠标悬停图片放大效果，hover效果！
jquery鼠标悬停图片放大
05-17
实现鼠标悬停时，图片放大，移开则图片大小还原。
HTML5 Slide卡片风格的图片轮显特效.rar
07-10
像抽卡片效果的HTML5 Slide图片轮显特效，这个效果是在一个国外的HTML5网站模板中整理出来的，视觉效果大气，图片同时带有阴影效果，在切换的过程中，像抽出卡片的效果，前后叠放在一起，可用于HTML5设计的网页效果中，当然也可用于手机端使用，HTML5对于移动端设备还是有很好的兼容性的。 　　本效果整体外观样式如下图所示，鼠标单击后前后轮番显示切换。
html的悬停图片缓慢放大,css3怎么实现鼠标悬停图片时缓慢变大效果?（图文+视频）...
weixin_42568714的博客
06-04 6720
本篇文章主要给大家介绍当鼠标滑过图片时实现放大效果的具体方法。当我们在浏览各大电商网站时，最常见的图片动态效果，应该就是鼠标移入图片即悬停在图片时出现放大的效果了。实现这样的动态效果主要是为了突出产品内容，提高用户体验。对于代码小白来说，这样的效果固然很吸引人但是想要通过html/css代码实现，可能一时不知道从何处下手。其实代码实现是非常简单，下面我们就通过简单的示例，给大家介绍实现鼠标经过图片...
html鼠标放在图片上图片自动放大，css使图片自动放大
热门推荐
weixin_52450702的博客
03-22 2万+
目的：将鼠标放在图片上，图片自动放大，鼠标移开后图片大小复原。 实现过程： 方法一：通过hover来控制鼠标放到图片上时图片的大小，通过transition来控制变化的时间。 具体代码如下 <!DOCTYPE html> <html> <head> <style> div { width:100px; height:200px; background:red; transition:width 2s; } div:hover { width:200px;
html悬停放大图片代码,html – 放大图像并在悬停时显示div
weixin_42652674的博客
06-03 1142
在图像悬停时,我想放大图像并显示带有透明背景的div.这是我的代码.在下面的示例中,当我将鼠标悬停在.Image类中的图像上时,我想要缩放它,并希望在div的中心显示类.mylink的链接.我能够放大悬停但是当我为.text添加样式时,它不再放大图像.HTML： linkCSS：#Box {text-align: center;margin: auto;width: 250px;he...
Html5+Css实现卡片动效
yushun的博客
07-26 715
Html5+Css实现卡片动效
html 鼠标悬停放大图片效果
X_lywfc的博客
10-10 1625
父节点加上 overflow: hidden; 子节点： .face-apply ul li div img:hover{ transform: scale(1.2); }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值