一、 CSS3鼠标悬停相册预览特效

最新推荐文章于 2024-03-22 00:23:28 发布
最新推荐文章于 2024-03-22 00:23:28 发布
阅读量595 收藏 4
点赞数 4
分类专栏： HTML特效 文章标签： html html5 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52916408/article/details/115034663
版权

文章目录

一、9款CSS3鼠标悬停相册预览特效

1.1 图片预览

在这里插入图片描述

在这里插入图片描述

1.2 html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>9款CSS3鼠标悬停相册预览特效</title>

<link href="css/main.css" rel="stylesheet" type="text/css"/>
<link href="css/sim-prev-anim.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div class="albums">
<div class="albums-inner">
<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-1">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
<img src="images/studio_0005.jpg" class="all studio"/>
<img src="images/studio_0006.jpg" class="all studio"/>
<img src="images/studio_0001.jpg" class="all studio"/>
</div>
<div class="albums-tab-text">.sim-anim-1 <span>(7 pictures)</span></div>
</div>

<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-2">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
<img src="images/studio_0010.jpg" class="all studio"/>

</div>
<div class="albums-tab-text">.sim-anim-2 <span>(5 pictures)</span></div>
</div>


<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-3">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
<img src="images/studio_0005.jpg" class="all studio"/>
<img src="images/studio_0006.jpg" class="all studio"/>
<img src="images/studio_0007.jpg" class="all studio"/>
<img src="images/studio_0008.jpg" class="all studio"/>
<img src="images/studio_0011.jpg" class="all studio"/>

</div>
<div class="albums-tab-text">.sim-anim-3 <span>(9 pictures)</span></div>
</div>


<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-4">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
<img src="images/studio_0005.jpg" class="all studio"/>
<img src="images/studio_0006.jpg" class="all studio"/>
<img src="images/studio_0007.jpg" class="all studio"/>
<img src="images/studio_0008.jpg" class="all studio"/>
<img src="images/studio_0009.jpg" class="all studio"/>

</div>
<div class="albums-tab-text">.sim-anim-4 <span>(9 pictures)</span></div>
</div>

<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-5">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
<img src="images/studio_0005.jpg" class="all studio"/>

</div>
<div class="albums-tab-text">.sim-anim-5 <span>(5 pictures)</span></div>
</div>


<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-6">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0009.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
<img src="images/studio_0005.jpg" class="all studio"/>
<img src="images/studio_0006.jpg" class="all studio"/>
<img src="images/studio_0007.jpg" class="all studio"/>
<img src="images/studio_0008.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
</div>
<div class="albums-tab-text">.sim-anim-6 <span>(9 pictures)</span></div>
</div>


<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-7">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>

</div>
<div class="albums-tab-text">.sim-anim-7 <span>(4 pictures)</span></div>
</div>

<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-8">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
<img src="images/studio_0009.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
<img src="images/studio_0005.jpg" class="all studio"/>
<img src="images/studio_0006.jpg" class="all studio"/>
<img src="images/studio_0007.jpg" class="all studio"/>
<img src="images/studio_0008.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
</div>
<div class="albums-tab-text">.sim-anim-8 <span>(9 pictures)</span></div>
</div>

<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-9">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
<img src="images/studio_0005.jpg" class="all studio"/>
<img src="images/studio_0009.jpg" class="all studio"/>
<img src="images/studio_0007.jpg" class="all studio"/>
<img src="images/studio_0008.jpg" class="all studio"/>
<img src="images/studio_0006.jpg" class="all studio"/>
</div>
<div class="albums-tab-text">.sim-anim-9 <span>(9 pictures)</span></div>
</div>


    </div>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

1.3 main.css代码

body {
   
	margin: 0px;
	padding: 0px;
	background-color: #C3CCD5;
	font-family: 'Source Sans Pro', sans-serif;
}
.albums{
   
	width: 100%;
    float: left;
}
.albums-inner{
   
	width: 1100px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
}
.albums-title {
   
	float: left;
	width: 100%;
	color: rgba(53,117,159,1);
	font-size: 20px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: rgba(53,117,159,1);
	line-height: 50px;
	margin-bottom: 100px;
}
.albums-tab{
   
	float: left;
	width: 300px;
	margin-right: 100px;
	margin-bottom: 100px;
}
.albums-tab:nth-child(3n+0) {
   
	margin-right: 0px;
}

.albums-tab-thumb{
   
	float: left;
	width: 300px;
	height: 200px;
}
.albums-tab-thumb img {
   
	height: auto;
	width: 290px;
	background-color: rgba(255,255,255,1);
	padding: 5px;		
}
.albums-tab-text{
   
	float: left;
	width: 100%;
	text-align: center;
	color: rgba(53,117,159,1);
	margin-top: 15px;
	font-size: 18px;
}
.albums-tab-text span {
   
	font-size: 14px;
	color: rgba(102,102,102,1);
}

1.4 sim-prev-anim.css代码

.sim-anim-1{
   
	position: relative;
	}
.sim-anim-1 img{
   
	position: absolute;
	-webkit-transition: all 0.5s;
	-moz-transition: all
最低0.47元/天 解锁文章
&小小白&
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
html css图片展开动画,9种CSS3炫酷图片预览展示动画特效
weixin_30755903的博客
06-02 1577
这是一组共9款CSS3炫酷图片预览展示动画特效插件。css的新特性可以让我们制作出各种炫酷的动画效果。该图片预览展示动画特效就是一个很好的例子，该效果开始时图片堆叠在一起，当鼠标滑过图片时，图片会以9种不同的方式展开，有扇形、平面展开等等非常酷的效果。HTML结构下面来看看这个图片预览展示动画特效的HTML结构。整个结构使用一个div.albums作为包装容器。它的宽度被设置为1100像素。在.a...
CSS3过度鼠标经过实现炫酷图片效果
are_gh的博客
01-01 261
CSS3过度鼠标经过实现炫酷图片效果 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { background: #000; } .box { overflow: hidden; position: relative; width:450px; height:320px; border:
css3鼠标悬停图片特效,图片悬停效果源码
爱酷码的博客
03-22 643
css3鼠标悬停图片特效,图片悬停效果源码，可以在网页上面作为自己的动态加载名片，放到侧边栏或者网站合适的位置即可。
sprity-css-rollover:在鼠标悬停时提供视频预览效果
05-21
sprity-css-rollover 用于css-rollover样式处理器 提供鼠标悬停时的视频预览效果 如果没有鼠标悬停，则允许使用默认图像 查看 要求 版本> = 1.0 安装 npm i sprity-css-rollover 用法 <!-- Change cursor manually, if needed --> < style type =" text/css " > . icon : hover { cursor : pointer; cursor : hand;} </ style > <!-- Load CSS --> < link rel =" stylesheet " type =" text/css " href =" style.css " /> <!-- Set default image: icon-sprite008 --> < div class
八大经典优雅的CSS鼠标悬浮动画-hover属性
热门推荐
weixin_62650212的博客
04-02 4万+
相信大家也有为自己做的hover效果不太满意的，本文给大家介绍几款不错的css鼠标悬浮动画，老规矩，复制粘贴即用。 1.
vue实现一个鼠标滑动预览视频封面组件
Twinkle_sone的博客
07-24 3671
🎈不知道大家平时在逛B站的时候有没有发现这么一个功能？在视频封面移入鼠标时我们可以对视频进行预览，预览过后再决定时候要点进去观看视频，那么这个实现具体是怎么实现的呢？让我们一起动手来试一下吧。...
php鼠标悬停显示图片,鼠标滑过出现预览的大图提示效果
weixin_36217616的博客
03-12 272
当鼠标滑过图片时，图片会出现预览的大图，大图下面还会有介绍文字。.aa{width:88px;height :100px;}$(function () {var x = 10;var y = 20;$("a.tooltip").mouseover(function (e) {this.myTitle = this.title;this.title = "";var imgTitle = this....
CSS3鼠标悬停效果
qq_38822390的博客
05-21 1156
这是一个很简单的效果，简单的记录一下代码，先看效果图。 <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-s...
9款CSS3鼠标悬停相册预览特效.rar
最新发布
06-23
9款CSS3鼠标悬停相册预览特效.rar 9款CSS3鼠标悬停相册预览特效.rar 9款CSS3鼠标悬停相册预览特效.rar 9款CSS3鼠标悬停相册预览特效.rar 9款CSS3鼠标悬停相册预览特效.rar 9款CSS3鼠标悬停相册预览特效.rar 9款CSS3...
9款CSS3鼠标悬停相册预览特效特效代码
03-20
本文将详细阐述“9款CSS3鼠标悬停相册预览特效”的相关知识点，这些特效为网页设计师提供了丰富的交互式相册展示方案。 首先，CSS3的:hover伪类是实现鼠标悬停效果的基础。当用户将鼠标指针移动到元素上时，这个伪...
jquery-rollover-tooltip 滑出式提示层特效.rar
07-10
jquery-rollover-tooltip 滑出式提示层特效，鼠标放在图标上，立即显示出文字提示层，很漂亮的风格，带有小缺口，看上去更人性化，本提示框特效基于jquery插件实现，在网页上实现tooltip效果，使用这款插件是不错的选择。源码中的示例页面就是调用方法的演示。
JS与CSS实现的图片预览功能
10-27
使用js编写的图片预览页面，只有几行代码即可实现，拿到手直接复制粘贴就可以，代码简介 不会占用太多的空间
9款CSS3鼠标悬停相册预览特效
04-06
本资源"9款CSS3鼠标悬停相册预览特效"汇集了九种不同的相册展示方式，它们在用户将鼠标指针移动到图片上时，能呈现独特的预览效果，提升了用户的浏览体验。 1. **CSS3选择器与过渡效果**：这些特效利用了CSS3的选择...
8款CSS3鼠标悬停相册预览特效
11-17
本资源包“8款CSS3鼠标悬停相册预览特效”聚焦于利用CSS3技术实现的动态相册预览效果，旨在提升用户在浏览图片时的交互性与视觉享受。下面我们将详细探讨这些特效的核心技术和实现方法。 首先，CSS3的过渡...
9款CSS3鼠标悬停相册预览特效.zip
04-13
"9款CSS3鼠标悬停相册预览特效.zip"这个资源集合了多种利用CSS3实现的创新性图片相册预览效果，这些效果在用户将鼠标悬停在图片上时会动态显示，提升了用户体验和交互性。以下将详细介绍其中可能包含的知识点： 1. ...
CSS：实现鼠标悬停，切换图片的两种方法
奶绿走糖的博客
10-09 1万+
HTML CSS 两种方法：实现鼠标悬停，切换图片第一种方法：利用css的display属性第二种方法：利用css的background属性展示 第一种方法：利用css的display属性 html： <div class="light"> <img class="yellow" src="../../assets/imgs/icon_yel.png" alt="黄色灯泡"> <img class="red" src="../../assets/img
CSS3个人相册封面悬停放大特效
weixin_53666393的博客
03-14 114
CSS3个人相册封面悬停放大特效
js实现鼠标悬浮图片放大预览
欢迎来到快乐星球
08-05 4612
js实现鼠标悬浮图片放大预览
前端基础之浮动个人相册
clover_oreo的博客
12-07 350
相册的布局同样使用到浮动float
css3鼠标悬停展开
07-28
对于实现鼠标悬停展开效果，您可以使用CSS3中的伪类选择器:hover来实现。下面是一个简单的示例代码： HTML: ```html 内容1 ``` CSS: ```css .container { width: 200px; height: 200px; background-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

&小小白&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值