Publicado em 12 de fev.

[Resolvido] Sobrepor TEXTO em imagem?

Olá Pessoal,

Andei navegando na net até que encontrei um destaque interessante!

Eu queria saber como eu faço um destaque igual ao do EGO (www.ego.com.br)!?

A imagem segue abaixo:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.uploadimagens.com/upload/537e6feb829eeed8ed335d5201ae786a.jpg&key=6143b73bb4c5efaa0bdb428f0837df0ce04ace9bbf1ce1e58e0384b94b1af7e9" alt="Imagem Postada" />

Ficarei Grato Por Respostas! Valeu! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Discussão (9)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carlos Designer· 12 de fev.

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>

T.Colucci· 12 de fev.

Isso mesmo!!

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

Digo RS· 12 de fev.

Bem, mas como eu posso utilizar ele num sistema em php??

(eu quero utilizar numa vizualizaçao de destaque de notícias em php, em um portal)

T.Colucci· 12 de fev.

Tutorial ensinando isso amigão!!

Dê uma lida e qualquer dúvida, use o fórum de PHP! Ok?

Espero que ajude.

Digo RS· 12 de fev.

ok..., mas eu queria saber como eu faço ele a parecer dados do bd com o mesmo estilo!?

T.Colucci· 12 de fev.

Ahn sim, me desculpe. Agora entendi.

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

Digo RS· 12 de fev.

aff, bem, tipo: eu quero saber como que eu aplico o PHP no mesmo style do nosso amigo Carlos Designer!??

T.Colucci· 13 de fev.

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.

Digo RS· 14 de fev.

Cara! Vocês são feras! Vlw Consegui como eu queria! T+! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif