鼠标移过图片变高亮

前言：自从写博客开始，此次快一个月没有更博了，说忙也不是由于忙，无论怎么，今天总算是又开始了。最近在写一个项目，因此又学到一些小特效，今天就简单的总结下。咱们平时进入一个网站，扫过一个图片有时就会看到，图片出现文字，而后图片变得灰暗，或者图片变得高亮。两个其实都是一个原理，咱们能够用透明度opacity和层级z-index，这两个属性来设置。css

一。实现过程：
（1）定义一个大的div，在里面包含一个div和一个img
（2）将小div设置为绝对定位，img为相对定位
（3）让img的大小为100%，即大div的大小，小div的大小与img相等
（4）给小div加上背景色，开始透明度为本身设置一个0到1之间的数便可，当鼠标扫过期透明度设为0，即彻底透明html

二。代码以下：
（1）html代码：web

<div class="card">
    <div class="before"></div>
    <img src="images/6.jpg">
</div>

（2）主要的css代码：app

.card
{ height:200px; margin:0 auto; width:230px; }

.card:hover
{ cursor:pointer; }

.card img
{ height:200px; width:100%; }


.before
{ height:200px; width:230px; position:absolute; z-index:999; background:#282f44; opacity: 0.3; }

.before:hover
{ background:#282f44; opacity: 0; }

三。效果如图：svg

以上实现的过程很简单，若是要改变图片的大小或者是在图片上加文字，都是这个思路，在鼠标扫过图片时，改变图片的大小，或显示原来隐藏的div便可，若是有更好的办法，欢迎来提意见。网站