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

Question

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

Answer 1

.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>

Answer 2

请参阅this 和this 了解更多信息。 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>