图片悬停CSS的文字和不透明度更改 [英] Text and opacity change for image hover CSS

问题描述

下面是我希望能够实现的悬停式样式的图像

http://imageshack.us/a/ img577 / 7093 / cxzy.png （非悬停）

http://imageshack.us/photo/my-images/585/l9ka.png/ （悬停）

我一直在尝试这么多种不同的方式，而且他们都没有工作！

方法来做到这一点，但我通过：在我的例子中的伪元素之后做到了。

jsFiddle here

HTML

 < div> 
< img src =.../> 
< / div> 
  

CSS

  div {
 position：relative; 
 display：inline-block; 
} 
 div：hover：after {
 content：content here ..; 
宽度：100％; 
身高：100％; 
 background：rgba（0,0,0，.5）; 
 border：10px纯红色; 
位置：绝对; 
 top：0; 
剩下：0; 
 display：inline-block; 
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
 text-align：center; 
颜色：白色; 
 padding：12px; 
 font-size：20px; 
} 
  

I am trying to make a hover over text on an image.

Here are to images of the style of hover over I am hoping to achieve

http://imageshack.us/a/img577/7093/cxzy.png (non hover)

http://imageshack.us/photo/my-images/585/l9ka.png/ (hover)

I have been trying so many different ways and none of them seem to be working!

解决方案

There are a few ways to do this, but I did it via the :after pseudo element in my example.

jsFiddle here

HTML

<div>
  <img src="..."/>
</div>

CSS

div {
    position:relative;
    display:inline-block;
}
div:hover:after {
    content:"content here..";
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    border:10px solid red;
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    text-align:center;
    color:white;
    padding:12px;
    font-size:20px;
} 

这篇关于图片悬停CSS的文字和不透明度更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！