6

Alguém sabe como colocar uma descrição na foto, com fundo preto meio transparente? Assim como o ocorre em vários blogs, um exemplo é o site da Rihanna.

Algo do tipo uma timeline ou um blog com miniaturas em fotos. Alguém sabe como fazer essa legenda aparecer?

3 Respostas 3

9

Apareceram aqui várias repostas enquanto eu estava a escrever a minha sugestão, mas decidi postar aqui na mesma outra maneira de como podes fazer o pretendido apenas usando CSS.

Exemplo no 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>

Sim, isto poderia ser feito com JQuery. Mas eu pessoalmente prefiro usar esta opção com CSS.
Eis um conselho, sempre que possas utilizar CSS em vez de JQuery ou javascript para fazer qualquer coisa, usa CSS. Eis o porquê:

  1. Primeiro que tudo, usar CSS é muito mais eficiente.

  2. Estás a usar um monte de interacções desnecessárias para fazer algo que podes fazer apenas com CSS. E usando JQuery vais também aumentar o tempo de processamento desta acção. Eis um exemplo:

O jQuery oferece uma série de métodos para aplicar estilos específicos, como por exemplo:

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

Usando puro JavaScript:

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

Mais de 10.000 iterações foram feitas usando selectores em cache, o código jQuery foi executado em 6,670ms, Enquanto o JavaScript Nativo levou 330ms - foi 20 vezes mais rápido. Usando CSS será mais rápido ainda, e é com certeza a melhor forma de o fazer a menos que algum valor precise de ser calculado por alguma razão.

3
  • 1
    Obrigado, mesmo que que já tenham respondido, a sua resposta não foi em vão :) Afinal, o código é construtivo. Obrigado do Mesmo jeito Commented 17/05/2015 às 3:19
  • Moço, sabe fazer a descrição subir? Vindo da Parte de Baixo? Tipo lá no Site da Rihanna. Commented 19/05/2015 às 0:03
  • 1
    Sim, é possível fazer isto @HugoMarcelo . Basta darmos uma posição negativa à class .imgTextInfo como por exemplo .imgTextInfo {bottom: -30%;} e lhe darmos a posição inicial quando o mouse passar por cima da imagem, que neste será .hoverInfo:hover .imgTextInfo{bottom:0;} . Atênção que também iremos precisar de dar um overflow: hidden; à class .hoverInfo para que o efeito não fique esquesito. Veja o update da minha resposta. Se isto lhe ajudou, por favor conside marcar a minha solução como correcta =)
    – Chun
    Commented 19/05/2015 às 1:16
8

Opção 1:

O plugin jQuery Capty, faz exatamente o que você precisa, só que você vai precisar do jQuery.

Aqui o link do código no GitHub:

https://github.com/wbotelhos/capty

E um demo:

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

Opção 2:

Se você prefere uma solução mais simples, pode fazer você mesmo usando jQuery. Achei esse tutorial e é bem simples, vou deixar aqui um exemplo funcionando:

$(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>

Link original do tutorial

6
  • Muito Obrigado. Estou Baixando o Capty. Commented 17/05/2015 às 2:22
  • 1
    Coloquei uma segunda opção, se achar mais simples. Commented 17/05/2015 às 2:26
  • Moço, eu sei como usar CSS e HTML. Mas que tag eu uso nesse script? Commented 17/05/2015 às 2:29
  • 1
    Você pode usar a tag <script></script>, insira o código dentro dela e coloque no final da página, antes do fechamento do <body>. Existem outras maneiras, mas essa é mais simples para o seu caso. Sugiro dar uma pesquisada depois. Repare que o script começa com o evento load da página, isso é porque é preciso esperar o carregamento das imagens. Commented 17/05/2015 às 2:33
  • 1
    De nada, vou adicionar a tag jQuery na sua questão, já que a resposta envolveu o seu uso. Commented 17/05/2015 às 2:36
6

Uma maneira mais simples é utilizar o animation do jQuery.

Exemplo:

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>

Pode ver aqui também: http://jsfiddle.net/36awnxc1/

2
  • 1
    Obrigado, sua Resposta foi útil Diegoos. Commented 17/05/2015 às 2:53
  • 1
    Mas já resolveram meu problema. Obrigado de Coração :) Commented 17/05/2015 às 2:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .