html.de - Hover Text by nextGen Thumbnail - Demo #1

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans:100,100i,300,300i,400,400i,500,500i,700,700i,800,800i,900,900i|Playfair+Display:100,100i,300,300i,400,400i,500,500i,700,700i,800,800i,900,900i"></script>
<div id="ngg-image-0" class="ngg-gallery-thumbnail-box" >
  <div class="ngg-gallery-thumbnail">
    <a href="http://www.magnificentbag.com/wp-content/gallery/loobook-collectionnoir/Lookbook-No1-cover.jpg" title="" data-src="http://www.magnificentbag.com/wp-content/gallery/loobook-collectionnoir/Lookbook-No1-cover.jpg" data-thumbnail="http://www.magnificentbag.com/wp-content/gallery/loobook-collectionnoir/thumbs/thumbs_Lookbook-No1-cover.jpg" data-image-id="55" data-title="Lookbook-No1-cover" data-description="" class="ngg-fancybox"  rel="b65349382f926091e9a5e3db83decfd4">
       <img title="Lookbook-No1-cover" alt="Lookbook-No1-cover" src="http://www.magnificentbag.com/wp-content/gallery/loobook-collectionnoir/dynamic/Lookbook-No1-cover.jpg-nggid0255-ngg0dyn-700x700x100-00f0w010c010r110f110r010t010.jpg" width="495" height="700" style="max-width:100%;"/>
    </a>
  </div>
</div>

CSS

/* CSS aus WP */
* {
  box-sizing: border-box;
}
div {     
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: 0 0;
}
.ngg-gallery-thumbnail-box {
  float: left;
  max-width: 100% !important;
} 
.ngg-gallery-thumbnail {
  text-align: center;
  max-width: 100% !important;
  background-color: #FFF;
  border: 1px solid #A9A9A9;
  margin: 5px;
}
a {
  display: block;
  margin: 4px;
  border: none;
  box-shadow: none;
  text-decoration: none;
}
img {
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 100% !important;
  height: auto;
}
.ngg-gallery-thumbnail img {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition: opacity .5s linear;
}
.ngg-gallery-thumbnail img:hover {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -webkit-transition: opacity .5s linear;
} 
/* Hinzugekommenes CSS */
.ngg-gallery-thumbnail a::before {
  visibility: hidden;
  display: block;
  width: 100%;
  line-height: 40px;
  content: "Foobar";
  font: 300 'Open Sans', arial, sans-serif;
  background: rgba(0, 0, 0, 0.95);
  color: #fff;
}
.ngg-gallery-thumbnail a:hover::before {
  visibility: visible;
}