css实现hover遮图罩

萌新一枚,第一次写，有不周到和不合理的地方请大佬们多多提意见~
在百度前端学院学到做一个简单的网页，写写笔记，加深一下理解，也可以给一些需要的朋友一点参考~

鼠标hover到图片上时的效果变化

1.首先将四张图分为上下两部分，用；两个div包裹起来
2.

首先在上方的div中再分左右两个div，将第一张图片放在左边div中，在css中给出图片地址以及样式，
background-image: url();括号里填图片地址
background-repeat: no-repeat;不要平铺
background-size: cover;图片铺满所包含的div

3.遮图罩里的内容：
在包含了图片的div中新建div,里面就是遮图罩的类容：例如

在css中填写遮图罩的样式，用visibility: hidden;隐藏遮图罩（此时遮图罩的内容是与图片重叠的，在遮图罩的样式中，注意加上background-color: rgba(0, 0, 0, 0.6);意思是给图片上加上一层颜色背景，前三个数字是颜色，后面一个是透明度
）

4.使用hover显示遮图罩
用
.img-5:hover .active {
visibility: visible;
}
将遮图罩显示出来，此时将鼠标移上第一张图片后会出现遮图罩效果，移开就会消失，我们所需要的效果就做好啦，其他几张也是这样！
**

css实现hover遮图罩相关推荐

html背景图片垂直居中,css — 定位、背景图、水平垂直居中
css - 定位.背景图.水平垂直居中目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; s ...
HTML+CSS实现轮播图效果
HTML+CSS实现轮播图效果效果图如下(想要源码或者感兴趣的小伙伴可以评论区留言哦!) HTML部分源代码如下: <!DOCTYPE html> <html ><he ...
使用HTML+CSS实现轮播图
轮播图的实现使用CSS控制轮播图无自动轮转,只能通过悬浮标签来改变. 准备材料,一个div用来盛放所有参与轮播的图片.n个用来控制悬浮的小div.n-1个放好图片的img. 将div相对定位但是不 ...
html、css 实现轮播图的静态样式
最终效果:利用html.css实现轮播图(静态的,我只实现轮播图的基本样式) 一:选取四张图片作为轮播图的素材: html: <div class="banner">& ...
【CSS进阶】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍精灵图.字体图标.CSS三角.用户界面样式.vertical-align.常见布局技巧.初始化思 ...
CSS Sprite雪碧图详解
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
纯CSS实现轮播图（结合动画）
图片自动切换实现原理:使用一个div(class="out")并设置溢出隐藏保证每次只显示一张,在内部设置另一个div.outer包裹所有的图片,图片均水平排列,包裹图片的div使 ...
[css] 你是怎么设计css sprites（精灵图）的？有哪些技巧？
[css] 你是怎么设计css sprites(精灵图)的?有哪些技巧? 首先肯定不会去用PS量,那太费时间了~ 没有webpack以前,用Gulp的gulp.spritesmith插件,这里附上配置 ...
[css] 鼠标事件css的:hover和js的mouseover有什么区别？
[css] 鼠标事件css的:hover和js的mouseover有什么区别? JavaScript中鼠标事件有:onmouseover和onmouseout: 当鼠标移入和移出时触发事件onmous ...

css实现hover遮图罩

css实现hover遮图罩

css实现hover遮图罩相关推荐

最新文章

热门文章