css 悬停时创建带有一些文本的半透明背景

Question

我想创建一个半透明背景并在用户将鼠标悬停在图像上时显示一些文本 http://demo.rocknrolladesigns.com/html/jarvis/#team。有没有不用jquery的方法？如果有，谁能教教我？

Answer 1

见this and this for more info. jsfiddle

#wrapper span {
    visibility:hidden;
    position:absolute;
    left: 50px;
    top: 70px;
}

#wrapper:hover span {
    visibility:visible;
}

#wrapper:hover img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

<div id="wrapper">
    <img src="http://jonamdall.files.wordpress.com/2011/06/small-nyan-cat11.gif" />
    <span>This is cat!</span>
</div>

Answer 2

.container {
    display: inline-block;
    overflow: visible;
    font-family: sans-serif;
    font-size: 1em;
  }
.theimg {
    display: block;
    width: 314px;
    height: 223px;
    border: solid 1px lightgray;
    border-bottom: none;
    transition: all .5s ease;
  }
.container:hover .theimg {
    opacity: 0.3;
  }
.thename {
    border: solid 1px lightgray;
    text-align: center;
    padding: 6px 0 6px 0;
    transition: all .5s ease;
  }
.container:hover .thename {
    color: white;
    background-color: #ffd600;
  }
.thecover {
    position: relative;
    text-align: center;
    top: -200px;
    padding: 6px 0 6px 0; 
    opacity: 0;
    transition: all .5s ease;
  }
.container:hover .thecover {
    top: -170px;
    opacity: 1;
  }
.thetitle {
  font-size: 1.4em;
  color: #515a7c;
  font-weight: bold;
  display: inline;
  opacity: 1;
  }

Yes, you can make it with CSS only:

<div class=container>
  <img class=theimg src='http://demo.rocknrolladesigns.com/html/jarvis/images/team/team1.png' />
  <div class=thename>MIKE ROSS</div>
  <div class=thecover>
    <div class=thetitle>FOUNDER</div>
  </div>  
</div>

css 悬停时创建带有一些文本的半透明背景

css create translucent background with some text when hover

html

css

css-animations