Information when Hovering Mouse in Photo

Question

Does anyone know how to put a description in the photo, with a black half-transparent background? As with many blogs, one example is rihanna’s website.

Something like a Timeline or a blog with thumbnails in photos. Does anyone know how to make this legend appear?

Answer 1

Several responses appeared here while I was writing my suggestion, but I decided to post here in the same other way as you can do the intended only using CSS.

Example in Jsfiddle: http://jsfiddle.net/pp02f40y/

.hoverInfo {
    position: relative;
    width: 400px;
    cursor:pointer;
    overflow: hidden;
    font-family: sans-serif;
}
.imgInfo {
    width: 400px;
}
.imgTextInfo {
    position: absolute;
    bottom: -30%;
    width: 100%;
    opacity: 0;
    
    background: rgba(0, 0, 0, 0.8);
    color: #fff;    
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.hoverInfo:hover .imgTextInfo {
    opacity: 1;
    bottom:0;
}

.what {padding: 5px 20px; border-bottom: 1px solid #fff;}
.when {float: right;}
.description {padding: 5px 20px;}
p {font-size: 13px;}

<div class="hoverInfo">
    <img class="imgInfo" src="http://i.imgur.com/fxGRWi0.jpg"/>
    <div class="imgTextInfo">
        <div class="what">
            <span class="title">Rihanna stuff</span>
            <span class="when">May 18, 2015</span>
        </div>
        <div class="description">
            <p>Hi there! This is just a random description. Click here to read more.</p>
        </div>
    </div>
</div>

Yes, this could be done with Jquery. But I personally prefer to use this option with CSS.
Here’s some advice, whenever you can use CSS instead of Jquery or javascript to do anything, use CSS. Here’s why:

1. First of all, using CSS is much more efficient.

2. You’re using a lot of unnecessary interactions to do something you can only do with CSS. And using Jquery will also increase the processing time of this action. Here’s an example:

jQuery offers a number of methods to apply specific styles, for example:

$("#meuElemento").css({
    color: "#c00",
    backgroundColor: "#eee",
    width: "200px",
    height: "100px",
    borderColor: "#f00"
});

Using Pure Javascript:

var m = document.getElementById("meuElemento"), c = m.style;
c.color = "#c00";
c.backgroundColor = "#eee";
c.width = "200px";
c.height = "100px";
c.borderColor = "#f00";

More than 10,000 iterations were made using cache selectors, jQuery code ran at 6,670ms, While Native Javascript took 330ms - it was 20 times faster. Using CSS will be faster still, and it’s certainly the best way to do it unless some value needs to be calculated for some reason.

Answer 2

Option 1:

The plugin jQuery Capty, does exactly what you need, only you will need jQuery.

Here’s the code link on Github:

https://github.com/wbotelhos/capty

And a demo:

http://www.wbotelhos.com/capty/

Option 2:

If you prefer a simpler solution, you can do it yourself using jQuery. I found this tutorial and it’s very simple, I’ll leave here an example working:

$(window).load(function() {
  $('div.description').each(function() {
    $(this).css('opacity', 0);
    $(this).css('width', $(this).siblings('img').width());
    $(this).parent().css('width', $(this).siblings('img').width());
    $(this).css('display', 'block');
  });

  $('div.wrapper').hover(function() {
    $(this).children('.description').stop().fadeTo(500, 0.7);
  }, function() {
    $(this).children('.description').stop().fadeTo(500, 0);
  });

});

div.wrapper {
  position: relative;
}
div.description {
  position: absolute;
  bottom: 0px;
  left: 0px;
  display: none;
  background-color: black;
  font-family: 'tahoma';
  font-size: 15px;
  color: white;
}
div.description_content {
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
  <img src='http://web.enavu.com/demos/caption/wolf.jpg' />
  <div class='description'>
    <div class='description_content'>O sequenciamento de DNA e estudos genéticos reafirmam que o lobo cinzento é ancestral do cão doméstico (Canis lupus familiaris), contudo alguns aspectos desta afirmação têm sido questionados recentemente.</div>
  </div>
</div>

Original link of the tutorial

Answer 3

A simpler way is to use jQuery’s Animation.

Example:

jQuery(".foto").stop().hover(function(){
    jQuery(".foto span").animate({height:"100px", opacity:"0.8"});
}, function(){
    jQuery(".foto span").animate({height:"20px", opacity:"0"});
});

.foto{
  cursor: pointer; 
  width:300px; 
  height:300px; 
  background:url(http://si.wsj.net/public/resources/images/BN-BI095_mag031_OZ_20140131160207.jpg) 100%; 
  position:relative;
}
.foto span{
  position:absolute; 
  bottom:0; 
  width:100%; 
  height:20px; 
  background:#000; 
  opacity:0.8; 
  color:#fff; 
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foto">
    <span>Legenda da foto</span>
</div>

You can see here too: http://jsfiddle.net/36awnxc1/