html鼠标放图片上右侧弹出遮罩,CSS如何实现鼠标放在图片上出现遮罩层

CSS如何实现鼠标放在图片上透明:

建议:尽可能的手写代码，可以有效的提高学习效率和深度。

在很多网站有这样的效果，当鼠标放在产品图片上的时候，会出现一个半透明的层遮盖住产品图片，并且附有产品介绍，下面就简单介绍一下如何实现此种效果。代码实例如下:

html>

CSS教程

.main{

width:450px;

height:294px;

position:relative;

}

img{border:none;}

a{

display:block;

width:450px;

height:294px;

}

.touming{display:none;}

a:hover .touming{

display:block;

width:450px;

height:294px;

background-color:green;

filter:alpha(opacity=40);

-moz-opacity:0.4;

opacity:0.4;

position:absolute;

top:0px;

left:0px;

color:yellow;

font-weight:bold;

text-align:center;

line-height:294px;

}

      

魅力之都，陕西印象。希望大家都能够来游玩

以上代码实现了想要的功能，原理其实非常的简单，就是在默认状态先将图片的遮罩隐藏，当鼠标放在图片上之后，再显示出来遮罩，并且对其使用绝对定位，这样它就会覆盖在了图片上面，最后设置它的透明度就可以了。

代码中用于透明度的代码说明:

filter:alpha(opacity=50);

-moz-opacity:0.5;

opacity:0.5;

第一行代码仅能在IE浏览器中有效。

第二行代码支持老版本的FF浏览器，其实去掉也可以，因为老版本的浏览器使用率很少了。

第三行能够支持各大浏览器，但是IE6-IE8浏览器不支持。