CSS3图像悬停效果

最新推荐文章于 2024-03-22 00:23:28 发布
最新推荐文章于 2024-03-22 00:23:28 发布
阅读量537 收藏
点赞数
文章标签： css html less js css3 ViewUI
原文链接：https://www.script-tutorials.com/css3-image-hover-effects/
版权
这篇博客介绍了如何利用CSS3实现不同的图像悬停效果，无需JavaScript。内容包括一个包含9张图片的示例画廊，每张图片都有独特的悬停效果。详细步骤包括HTML结构设置和CSS样式编写，提供了代码示例和下载资源。
摘要由CSDN通过智能技术生成
CSS3 Image Hover Effects
CSS3 Image Hover Effects

CSS3 Image Hover Effects Today I will tell you how to create different CSS3 image hover effects. I hope that you still remember our one old tutorial. We used javascript there. Today I will try to make something similar with using CSS3. In the result gallery page we will have 9 images, each of them have own hover effect.

CSS3图像悬停效果今天，我将告诉您如何创建不同CSS3图像悬停效果。 希望您仍然记得我们的一本旧教程 。 我们在那里使用了javascript。 今天，我将尝试使用CSS3做类似的事情。 在结果库页面中，我们将有9张图像，每张图像都有自己的悬停效果。

现场演示

[sociallocker]

[社交储物柜]

下载结果

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start !

好的，下载示例文件，然后开始！

步骤1. HTML (Step 1. HTML)

First, lets prepare the main HTML markup for our demo gallery. As you can see – result structure is quite easy. Here are set of DIV objects. Each of them contain one image and some virtual mask (DIV). Last one element will contain two masks.

首先，让我们为演示库准备主要HTML标记。 如您所见–结果结构非常简单。 这是DIV对象集。 它们每个都包含一个图像和一些虚拟蒙版(DIV)。 最后一个元素将包含两个遮罩。

index.html (index.html)

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Image Hover Effects | Script Tutorials</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/gall.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>CSS3 Image Hover Effects</h2>
            <a href="https://www.script-tutorials.com/css3-image-hover-effects/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <!-- panel with buttons -->
        <div class="photos">
            <div>
                <img src="images/pic1.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic2.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic3.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic4.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic5.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic6.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic7.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic8.jpg" />
                <div></div>
            </div>
            <div class="pair">
                <img src="images/pic9.jpg" />
                <div></div>
                <div></div>
            </div>
        </div>
    </body>
</html>


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Image Hover Effects | Script Tutorials</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/gall.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>CSS3 Image Hover Effects</h2>
            <a href="https://www.script-tutorials.com/css3-image-hover-effects/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <!-- panel with buttons -->
        <div class="photos">
            <div>
                <img src="images/pic1.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic2.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic3.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic4.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic5.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic6.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic7.jpg" />
                <div></div>
            </div>
            <div>
                <img src="images/pic8.jpg" />
                <div></div>
            </div>
            <div class="pair">
                <img src="images/pic9.jpg" />
                <div></div>
                <div></div>
            </div>
        </div>
    </body>
</html>

步骤2. CSS (Step 2. CSS)

I omit styles of layout.css. Here are nothing interesting. The most interesting – next one file (where I have prepared all necessary styles of our gallery):

我省略了layout.css的样式。 这没什么有趣的。 最有趣的是下一个文件(我准备了画廊的所有必需样式)：

css / gall.css (css/gall.css)

.photos {
    width: 945px;
    height: 400px;
    margin: 100px auto;
    position:relative;
}
.photos > div {
    background-color: rgba(128, 128, 128, 0.5);
    border: 2px solid #444;
    float: left;
    height: 100px;
    margin: 5px;
    overflow: hidden;
    position: relative;
    width: 300px;
    z-index: 1;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-transform:scale(1.0);
    -moz-transform:scale(1.0);
    -ms-transform:scale(1.0);
    -o-transform:scale(1.0);
    transform:scale(1.0);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div img{
    width: 100%;
}
.photos > div:hover{
    z-index: 10;
    -webkit-transform:scale(2.0);
    -moz-transform:scale(2.0);
    -ms-transform:scale(2.0);
    -o-transform:scale(2.0);
    transform:scale(2.0);
}
.photos > div div {
    background: url(../images/hover.gif) repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 15;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div:nth-child(1):hover div {
    height: 0%;
}
.photos > div:nth-child(2):hover div {
    height: 0%;
    margin-top: 100px;
}
.photos > div:nth-child(3):hover div {
    width: 0%;
}
.photos > div:nth-child(4):hover div {
    margin-left: 300px;
    width: 0%;
}
.photos > div:nth-child(5):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
}
.photos > div:nth-child(6):hover div {
    margin-left: 150px;
    width: 0%;
}
.photos > div:nth-child(7):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
.photos > div:nth-child(8):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
    -webkit-transform: rotateZ(600deg);
    -moz-transform: rotateZ(600deg);
    -ms-transform: rotateZ(600deg);
    -o-transform: rotateZ(600deg);
    transform: rotateZ(600deg);
}
.photos > div.pair div {
    width: 50%;
}
.photos > div.pair div:nth-child(odd) {
    margin-left: 150px;
}
.photos > div.pair:hover div {
    width: 0%;
}
.photos > div.pair:hover div:nth-child(odd) {
    margin-left: 300px;
}


.photos {
    width: 945px;
    height: 400px;
    margin: 100px auto;
    position:relative;
}
.photos > div {
    background-color: rgba(128, 128, 128, 0.5);
    border: 2px solid #444;
    float: left;
    height: 100px;
    margin: 5px;
    overflow: hidden;
    position: relative;
    width: 300px;
    z-index: 1;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-transform:scale(1.0);
    -moz-transform:scale(1.0);
    -ms-transform:scale(1.0);
    -o-transform:scale(1.0);
    transform:scale(1.0);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div img{
    width: 100%;
}
.photos > div:hover{
    z-index: 10;
    -webkit-transform:scale(2.0);
    -moz-transform:scale(2.0);
    -ms-transform:scale(2.0);
    -o-transform:scale(2.0);
    transform:scale(2.0);
}
.photos > div div {
    background: url(../images/hover.gif) repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 15;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div:nth-child(1):hover div {
    height: 0%;
}
.photos > div:nth-child(2):hover div {
    height: 0%;
    margin-top: 100px;
}
.photos > div:nth-child(3):hover div {
    width: 0%;
}
.photos > div:nth-child(4):hover div {
    margin-left: 300px;
    width: 0%;
}
.photos > div:nth-child(5):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
}
.photos > div:nth-child(6):hover div {
    margin-left: 150px;
    width: 0%;
}
.photos > div:nth-child(7):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
.photos > div:nth-child(8):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
    -webkit-transform: rotateZ(600deg);
    -moz-transform: rotateZ(600deg);
    -ms-transform: rotateZ(600deg);
    -o-transform: rotateZ(600deg);
    transform: rotateZ(600deg);
}
.photos > div.pair div {
    width: 50%;
}
.photos > div.pair div:nth-child(odd) {
    margin-left: 150px;
}
.photos > div.pair:hover div {
    width: 0%;
}
.photos > div.pair:hover div:nth-child(odd) {
    margin-left: 300px;
}
现场演示

结论 (Conclusion)

Today we have nine great onhover image effects. Welcome back to read our new tutorials!

今天，我们有九种出色的悬停图像效果。 欢迎回到阅读我们的新教程！

翻译自: https://www.script-tutorials.com/css3-image-hover-effects/

cuken7684698822
关注
3d-layered-image-on-hover:了解如何创建CSS 3d图像悬停效果
03-20
在本文中，我们将深入探讨如何使用CSS来创建一个引人注目的3D图像悬停效果。这个技术在网页设计中非常流行，因为它可以为用户提供互动性的视觉体验，增强网站的吸引力。我们将主要关注CSS过渡（Transitions）、等距...
推荐12个绚丽的CSS3图片悬停效果
weixin_33966365的博客
11-13 246
CSS3为我们开发提供了很多特效，如鼠标悬停，线性渐变，在web开发早期常用的是鼠标悬停，他是网页制作的常用特效之一，早期使用Flash可以制作非常炫的效果，后来慢慢演变成现在的是图片悬停效果，现在我们同样也可以使用CSS3来实现，这些效果被用来创建吸引人的视觉效果。 今天就分享12个精心收藏的CSS3图片悬停效果，通过使用这些图像悬停效果，你可以让你的网页设计看起来更具互动性和视觉上的吸引力。...
CSS图片响应悬停效果
weixin_57780589的博客
10-20 1582
【代码】CSS图片响应悬停效果。
html 图片悬停,CSS3 3种图片悬停时的内容滑出方式
weixin_39907131的博客
06-04 143
CSS语言：CSSSCSS确定@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300&subset=latin,cyrillic-ext);/* Vars */body * {box-sizing: border-box;}body {background: #282828;color: #fafafa...
HTML5+CSS3 鼠标悬停3D立体图片效果
qq_44543292的博客
02-17 2664
效果图： 设置一个盒子，里面放两个div。 2.div旋转并设阴影。 3.加伪类，使鼠标移入这个盒子的时候div有动画效果。 这样就完成应该是一个鼠标悬停立体图片的效果。 ...
css3鼠标悬停图片特效,图片悬停效果源码
最新发布
爱酷码的博客
03-22 661
css3鼠标悬停图片特效,图片悬停效果源码，可以在网页上面作为自己的动态加载名片，放到侧边栏或者网站合适的位置即可。
CSS3卡片悬停图文遮罩显示特效
07-24
本篇将深入探讨"CSS3卡片悬停图文遮罩显示特效"这一主题，以及如何通过CSS3实现这一效果。 首先，"卡片"（Card）布局是现代Web设计中的一个常见模式，它将信息封装在一个自包含的单元中，通常包含图像、标题和描述...
纯CSS3实现图像鼠标悬停效果
04-13
主要利用css3transition、transform实现鼠标悬停效果，很不错的效果，定然不让你失望，可以到http://blog.csdn.net/whqet/article/details/22891391了解详情。
CSS3文件夹悬停打开动画特效
07-24
本主题“CSS3文件夹悬停打开动画特效”就是利用CSS3的强大功能，实现了一个模拟现实生活中文件夹开启效果的交互设计。这个设计主要用于提升用户在浏览网站时的互动性和趣味性，使得网页元素不再仅仅是静态的图像，...
CSS3 3D立体鼠标悬停事件代码
06-24
在本文中，我们将深入探讨如何使用CSS3 3D立体效果和鼠标悬停事件来创建一个动态的、吸引人的图像布局。这个技术结合了jQuery库的强大力量，为网页设计带来新的视觉体验。 首先，CSS3是层叠样式表（Cascading Style...
15种CSS3图片Hover悬停效果代码
01-19
参考已有素材并修改的15种CSS3图片Hover悬停效果代码，非常漂亮，想美化页面的朋友可以看一下，
15种CSS3图片Hover悬停效果代码.
01-05
15种CSS3图片Hover悬停效果代码，非常炫酷，css3技术。
又一款简单漂亮的CSS3图片悬停遮罩效果.zip
07-11
又一款简单漂亮的CSS3图片悬停遮罩效果
CSS3图片悬停放大动画效果
04-15
CSS3图片悬停放大动画效果
css3边框交替动画_10个酷炫图像悬停动画特效「值得收藏」
weixin_36340926的博客
12-30 538
作者：semlinker转发链接：https://mp.weixin.qq.com/s/p0U8sVLtWd78CLc8kM22FQ前言本文小编将给大家介绍10个 图像悬停效果，希望小编精心录制的十个 Gif 动画能让大家眼前一亮，当然更希望这些特效能给大家设计图片悬停效果带来一些 「”灵感“」。感知方向的悬停效果❝示例说明：该示例会根据鼠标移入的方向展示不同的动画效果。示例来源：Noel Del...
CSS特效--图像悬停效果
Prototype__God的博客
02-14 1520
十分钟快速完成的酷炫css特效,快速练手,谁会拒绝给我妻善逸设计一个酷炫的背景呢?
css图片悬停特效,使用CSS3实现图片悬停放大的特效
weixin_39665992的博客
08-03 2434
图片浏览器相信大家已经见过不少，Windows用缩略图模式查看图片从某种意义上也算是一款图片浏览器。这类应用重点往往在于功能，界面比较单调，鼠标移上时没有任何效果。点击的时候背景高亮显示，代表图片被选中，期间没有任何过渡，对用户缺乏吸引力。本教程我们就来学习如何用css3来美化这类应用。先来看看效果，默认情况下图片变暗，鼠标移到图片上时，图片会变亮(实际上是恢复初始状态)，并且在图片周围显示一个模...
CSS布局案例 6-51 网页图片悬停效果
dpl12的博客
05-04 1070
文章目录前言实现过程1.步骤2.代码3.效果 前言 使用css3实现网页图片悬停效果。 实现过程 1.步骤 网页图片悬停效果实现步骤: 1、先作一个区域，放置上图片，设置图片鼠标悬停时的蒙版效果 2、然后做标题和两个图片 3、使用绝对定位的方式，起始时将三个内容放置在区域外侧，悬停时使用过渡动画移动到区域内部 2.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &
jQuery与CSS3打造的33款炫酷鼠标悬停效果合集
Original Hover Effects with CSS3教程提供了超过10种不同的图像悬停动画，让网页设计更加多样化。Simple Icon Hover Effects和Shape Hover Effect With Svg教程则分别介绍了简单的图标和形状的悬停效果，而3D Hover...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值