Does anyone know how to put a description in the photo, with a transparent black background? As with many blogs, an example is the Rihanna website .
Something like a timeline or a blog with thumbnails in photos. Does anyone know how to make this caption appear?
The jQuery Capty plugin does exactly what you need, only you will need jQuery.
Here is the code link in GitHub:
And a demo:
If you prefer a simpler solution, you can do it yourself using jQuery. I found this tutorial and it is very simple, I will 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><divclass='wrapper'><imgsrc='http://web.enavu.com/demos/caption/wolf.jpg'/><divclass='description'><divclass='description_content'>OsequenciamentodeDNAeestudosgenéticosreafirmamqueolobocinzentoéancestraldocãodoméstico(Canislupusfamiliaris),contudoalgunsaspectosdestaafirmaçãotêmsidoquestionadosrecentemente.</div></div></div>Tutorial original link
There were several responses here while I was writing my suggestion, but I decided to post here in the same other way as you can do just by using CSS.
Example in Jsfiddle: link
.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"/><divclass="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:
First of all, using CSS is much more efficient.
You're using a lot of unnecessary interactions to do something you can do with just CSS. And using JQuery will also increase the processing time of this action. Here is an example:
jQuery offers a number of methods for applying specific styles, such as:
$("#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";
Over 10,000 iterations were done using cached selectors, the jQuery code ran at 6,670ms, while the native JavaScript took 330ms - it was 20 times faster. Using CSS will be faster still, and it is certainly the best way to do it unless some value needs to be calculated for some reason.
A simpler way is to use jQuery 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><divclass="foto">
<span>Legenda da foto</span>
</div>You can see here too: link