css create translucent background with some text when hover

Question

I want to create a translucent background and display some text when user hover on the image like this http://demo.rocknrolladesigns.com/html/jarvis/#team . Is there anyway to make it without jquery?If yes,can anyone please teach me?

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

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