css实现鼠标移入图片，增加遮罩并在上方显示另一个图片

问题来源

最近做web项目，前端表单添加用户头像时遇到的问题，就是鼠标移入添加图片的按钮要有相应的动态效果，具体要求如图

#鼠标未移入效果

#鼠标移入效果

问题解决方式

不想让js代码太过繁多，只用css实现这个效果。具体操作如下：
#html的代码

<body>
<div class="addLogo"><img src="data:images/logo.png"><span><div class="mask"><img src="data:images/addIDPicture.png" alt=""></div></span>
</div>
</body>

#css的代码

<style>.addLogo {position: relative;width: 100px;height: 100px;border-radius: 10px;}.mask {position: absolute;/*因为父元素使用了相对定位，所以这里的绝对定位就是相对于父元素的*/top: 0;left: 0;width: 100px;height: 100px;background: rgba(0, 0, 0, 0.76);opacity: 0;border-radius: 10px;}.addLogo span:hover .mask {opacity: 1;}</style>

最终完成的效果图

###注意事项
两个图片大小最好都保持一直，如果不一致设置width和height就行了，否则可能会出现遮罩不能完全遮住的情况。

css实现鼠标移入图片，增加遮罩并在上方显示另一个图片相关推荐

[CSS] CSS实现鼠标移入图片放大效果
CSS实现鼠标移入图片放大效果一般在官网比较常见这种动效,当鼠标移入图片时可以看到视觉放大的效果,这里用到一个css属性 object-fit: cover; object-fit 属性 objec ...
html鼠标移除的效果,css实现鼠标移入移出动态效果
这篇文章主要介绍了关于css实现鼠标移入移出动态效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下知识点:transform-origin 兼容性:IE10以上 p { positi ...
html设置鼠标移入移出样式,css实现鼠标移入移出动态效果
这篇文章主要介绍了关于css实现鼠标移入移出动态效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下知识点:transform-origin 兼容性:IE10以上 p { positi ...
用css实现鼠标移入按钮，按钮出现动态的渐变色边框效果
用css实现边框的动态渐变色效果,希望对各位能有一些帮助. 边框.html <!DOCTYPE html> <html lang="en"><head ...
CSS实线鼠标移入显示隐藏div
用CSS中的 hover 事件,实线鼠标移入显示隐藏元素. 效果如下: 代码如下: <!DOCTYPE html> <html><head><meta cha ...
纯CSS实现鼠标移入显示图标效果
1.效果预览在淘宝或京东商城我们经常看到这样的效果:鼠标移动除某一个位置时出现下拉菜单,或者显示一个图标,那么这是如何实现的呢?我们今天就用CSS来实现鼠标移入时显示图标的一个效果. 下面是我们这次 ...
MFC入门（三）-- MFC图片/文字控件（循环显示文字和图片的小程序）
惯例附上前几个博客的链接: MFC入门(一)简单配置:http://blog.csdn.net/zmdsjtu/article/details/52311107 MFC入门(二)读取输入字符:http ...
CSS实现鼠标移入图片边框有小三角
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...
【笔记】css实现鼠标移入，菜单图标变叉叉
实现效果: 原: 移入: -----------------代码如下----------------- html部分: <div class="rotateChange"&g ...

css实现鼠标移入图片，增加遮罩并在上方显示另一个图片

问题来源

问题解决方式

css实现鼠标移入图片，增加遮罩并在上方显示另一个图片相关推荐

最新文章

热门文章