图片遮盖效果的小案例

作者: 让思念入土 | 来源:发表于2019-01-11 22:28 被阅读0次

实现鼠标经过图片时有一个半透明的效果

Image 16.png

Image 17.png


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<style>
  .box { 
    position: relative; 
    width: 222px; 
    height: 220px; 
    margin: 100px auto; 
  } 
  .mask { 
/* 原来盒子里面装有一个 黑色半透明的盒子 刚开始是看不见的隐藏*/ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 222px; 
    height: 220px; 
    background: rgba(0,0,0,.3) url(image/arr.png) no-repeat   center; 
    display: none; 
} 
/*当我们鼠标经过的时候，a里面的这个黑色半透明的盒子就显示出来了*/ 
  .box:hover .mask { 
    display: block; 
  } 
</style> 
</head> 
<body> 
<div class="box"> 
    <div class="mask"></div> 
    <img src="[image/3.jpg](image/3.jpg)" alt=""> 
</div> 
</body> 
</html>