Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Digo RS

[Resolvido] Sobrepor TEXTO em imagem?

Por , em Desenvolvimento frontend

Recommended Posts

Carlos Designer    0

Carlos Designer
Postado

Olá Digo RS,

 

Nunca tinha feito um efeito assim antes, mas analizando consegui montar algo semelhante.

 

A idéia consiste em colocar a imagem e o span dentro de um link com display:block, definir para o link as mesmas dimensões da imagem, colocar um position relative no span e usar um top negativo para subir ele, e por fim aplicar um overflow:hidden no link, para que não fique maior que o conteúdo.

 

Resumindo fica assim:

 

link

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Link Destaque</title>
<style type="text/css">
.destaque{
width:290px;
height:105px;
font-size:10px;
text-decoration:none;
display:block;
overflow:hidden;
}

.destaque img{
display:block;
border:0;
}

.destaque span{
font-family:Arial, Helvetica, sans-serif;
font-size:2em;
position:relative;
top:-50px;
line-height:1.14em;
color:#fff;
background:#3366CC;
}


</style>
</head>

<body>
<a class="destaque" href="#">
<img src="foto.jpg" width="290" height="105" />
<span>Gosta dos looks de Ana Paula Araujo</span>
</a>
<p>Algum texto logo abaixo</p>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

T.Colucci    33

T.Colucci
Postado

Isso mesmo!!

 

 

Sem contar que você pode fazer um script php que gere automaticamente esses textos junto com a imagem. ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

T.Colucci    33

T.Colucci
Postado

Ahn sim, me desculpe. Agora entendi.

 

 

Bem, então o que realmente irá funcionar nesse seu caso é a dica do nosso amigo Carlos Designer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

T.Colucci    33

T.Colucci
Postado

Basta usar classes nos elementos! :D

 

Tipo:

 

.destaque{
width:290px;
height:105px;
font-size:10px;
text-decoration:none;
display:block;
overflow:hidden;
}

.destaque img{
display:block;
border:0;
}

.destaque span{
font-family:Arial, Helvetica, sans-serif;
font-size:2em;
position:relative;
top:-50px;
line-height:1.14em;
color:#fff;
background:#3366CC;
}

 

PHP:

 

$dados = mysql_query($seu_sql);

$resultados = mysql_fetch_array($dados);

echo "<div class=/"destaque/"> <img src=/"$resultados['imagem']/" alt=/"$resultados['alt']/" /> <span>$resultados['texto']</span></div>";

Seria mais ou menos assim. A lógica é essa, faça as adaptações necessárias para o seu caso e se precisar de ajuda, volte a postar!

 

Espero que ajude.

 

:D

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito