HTML+CSS+JS实现 ❤️CSS3图片遮罩高亮显示❤️

效果演示：

GIF压缩太大、故显示图片查看吧

代码目录：

主要代码实现：

CSS样式：

@charset "utf-8";
* {margin: 0;padding: 0;list-style: none;
}body {background-color: #1B1B1B
}img {border: 0;cursor: pointer;
}a {text-decoration: none;
}.container01 .index-cont {width: 1200px;height: 990px;top: 100px;margin: 0 auto;position: relative;
}.container01 .index-cont li {-moz-border-radius: 30px;/* Gecko browsers */-webkit-border-radius: 30px;/* Webkit browsers */border-radius: 30px;/* W3C syntax */position: absolute;width: 680px;height: 485px;top: 0;left: 0;overflow: hidden;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;
}.container01 .index-cont .T02 {width: 500px;height: 235px;top: 0;left: auto;right: 0;
}.container01 .index-cont .T03 {width: 500px;height: 235px;top: 250px;left: auto;right: 0;
}.container01 .index-cont .T04 {width: 500px;height: 235px;top: auto;bottom: 250px;left: 0;
}.container01 .index-cont .T05 {width: 500px;height: 235px;top: auto;bottom: 0;left: 0;
}.container01 .index-cont .T06 {width: 430px;height: 485px;top: auto;bottom: 0;left: 520px;
}.container01 .index-cont .T07 {width: 230px;height: 485px;top: auto;left: auto;bottom: 0;right: 0;background-color: #707070;
}.container01 .index-cont .T07 p {width: 170px;padding: 40px 30px;color: #fff;text-indent: 2em;font-size: 16px;line-height: 20px;text-align: justify;
}.container01 .index-cont .T07 img {position: absolute;bottom: 40px;right: 30px;
}.container01 .index-cont:hover li {background: #000;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;
}.container01 .index-cont:hover img.bg {opacity: 0.5;filter: alpha(opacity=50);-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;
}.container01 .index-cont li:hover img.bg {opacity: 1;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;box-shadow: 2px 2px 10px #333;
}.container01 .index-cont li:hover {box-shadow: 2px 2px 10px #333;
}.container01 .index-cont .overlay {opacity: 0;position: absolute;top: 0;left: 0;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;
}.container01 .index-cont .T01 .overlay {top: 190px;left: 310px;
}.container01 .index-cont .T02 .overlay,
.container01 .index-cont .T03 .overlay,
.container01 .index-cont .T04 .overlay,
.container01 .index-cont .T05 .overlay {top: 60px;left: 210px;
}.container01 .index-cont .T05 .overlay {top: 60px;left: 200px;
}.container01 .index-cont .T06 .overlay {top: 150px;left: 150px;
}.container01 .index-cont:hover li .overlay {opacity: 1;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;
}.container01 .index-cont li:hover .overlay {opacity: 0;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;
}

部分HTML代码 :

<!doctype html>
<html><head><meta charset="utf-8"><title>css3鼠标悬停图片遮罩高亮显示图标效果</title><link href="css/style.css" type="text/css" rel="stylesheet" /></head><body><div class="container01"><div class="container clear"><div class="index-tatal"></div><ul class="index-cont"><li class="T01"><a href=""><img class="bg" src="data:image/index1-01.png" alt=""><div class="overlay"><img src="data:image/index-ICON01.png" alt=""></div></a></li><li class="T02"><a href=""><img class="bg" height="235" src="data:image/index1-02.png" alt=""><div class="overlay"><img src="data:image/index-ICON01.png" alt=""></div></a></li><li class="T03"><a href=""><img class="bg" height="235" src="data:image/index1-03.png" alt=""><div class="overlay"><img src="data:image/index-ICON02.png" alt=""></div></a></li><li class="T04"><a href=""><img class="bg" height="235" src="data:image/index1-04.png" alt=""><div class="overlay"><img src="data:image/index-ICON03.png" alt=""></div></a></li><li class="T05"><a href=""><img class="bg" height="235" src="data:image/index1-05.png" alt=""><div class="overlay"><img src="data:image/index-ICON04.png" alt=""></div></a></li><li class="T06"><a href=""><img height="485" class="bg" src="data:image/index1-06.png" alt=""><div class="overlay"><img src="data:image/index-ICON05.png" alt=""></div></a></li><li class="T07"><a href=""><p>自成立之始，久石人就以帮助最多设计师成功，实现每个设计师的设计理念和价值观，引领中国建筑设计达到国际领先水平为使命，坚持不懈，努力奋进！经过十年的积累与沉淀，已发展成为拥有2家分公司，三十多人的设计制作团队，具有先进设计和制作理念的数字科技公司。</p><img src="data:image/button.png" alt=""></a></li></ul></div></div></body></html>

上面的 image图片可以替换成自己喜欢的

源码获取

精彩推荐更新中：

HTML5大作业实战100套

打卡文章更新 37 / 100天

大家可以点赞、收藏、关注、评论我啦、需要完整文件随时联系我或交流哟~！

HTML+CSS+JS实现 ❤️CSS3图片遮罩高亮显示❤️相关推荐

css鼠标hover悬停图片遮罩层js特效
下载地址 css实现的鼠标悬停在图片上的遮罩特效,hover图片遮罩层样式.该鼠标hover动画在鼠标悬停到图片上面的时候,遮罩层以两个不规则图形出现,并显示描述文字和链接图标. dd:
HTML+CSS+JS实现 ❤️九宫格图片悬停遮罩层特效❤️
css+js实现三维空间图片旋转，炫酷旋转
1.先看效果图:例子中用的为网络图片,可以更换为自己的,由于大小限制,只能短暂录制!具体效果,可自己运行查看! 2.代码: <!doctype html> <html> < ...
HTML+CSS+JS实现 ❤️touchSlider图片滚动图片轮播❤️
效果演示: 代码目录: 主要代码实现: CSS样式: @charset "utf-8"; * {margin: 0;padding: 0;list-style: none;bord ...
CSS+JS实现网页(图片)特效
1.图片半透明效果实现图片默认显示是半透明的效果,鼠标移上去时透明度变为100%. ①用CSS+JS实现用CSS定义一类: #spotlight { FILTER: light } 并加入如下JS ...
html+css+js实现的图片轮播图下方配文字可变图片可点击
js代码 <script>// 首先获取相关DOMvar box =document.getElementById('box');var img =document.getElementB ...
HTML+CSS+JS实现 ❤️HTML5图片幻灯片轮播切换❤️
效果演示: 文末获取源码代码目录: 主要代码实现: HTML代码 : <!DOCTYPE html> <html><head><meta charset= ...
HTML+CSS+JS实现 ❤️照相机快门图片动画特效❤️
效果演示: 代码目录: 主要代码实现: 部分CSS样式: html {height: 100%;overflow: hidden; }body {min-height: 100%; }.contain ...
html+css+js简单实现图片轮播效果
<html> <head> <style type="text/css"> *{background-color:green;} #lunbo{ ...

HTML+CSS+JS实现 ❤️CSS3图片遮罩高亮显示❤️

效果演示：

代码目录：

主要代码实现：

CSS样式：

部分HTML代码 :

源码获取

HTML5大作业实战100套

HTML+CSS+JS实现 ❤️CSS3图片遮罩高亮显示❤️相关推荐

最新文章

热门文章