Ir para conteúdo

POWERED BY:

Arquivado

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

carlera

Texto por cima de imagem

Por , em Desenvolvimento frontend

Recommended Posts

carlera    0

carlera
Postado

boa noite!

 

tenho uma imagem com efeito de opacidade.

podem ver ela funcionando nesse exemplo com todos os códigos:

 

http://jsfiddle.net/9XzCV/1/

 

o que eu preciso fazer é que o texto desapareça,

assim que posto o mouse sobre a imagem.

 

alguém sabe um jeito? obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Fiz alguma coisa aqui para você cara,
Porém eu faria tudo com jQuery e não com CSS.

 

Segue

 

 
<!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>Documento sem título</title>´
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('img').mouseover(function(){
$("#tex").fadeOut('slow');
});
 
$('img').mouseout(function(){
$("#tex").fadeIn('slow');
});
});
</script>
<style type="text/css">
#tex{
    position:absolute;
    color:white;
    font-size:40px;
}
 
 
#black{
background-image:url('http://www.uniaopedras.com.br/granitos/Preto%20Absoluto.jpg.JPG');
width:200px;
    height:200px;
}
 
img {
    display: block;
    opacity: 0.2;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -webkit-transition: All 0.3s ease-in-out;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: initial;
    width:200px;
    height:200px;
}
img:hover {
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}
 
</style>
</head>
 
<body>
<div id="tex">
    TEXTO
</div>
 
<div id="black">
    <img src="http://farm8.staticflickr.com/7183/6908744113_31404cea97_m_d.jpg" />
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

carlera    0

carlera
Postado

 

Fiz alguma coisa aqui para você cara,

Porém eu faria tudo com jQuery e não com CSS.

 

Segue

 

 
<!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>Documento sem título</title>´
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('img').mouseover(function(){
$("#tex").fadeOut('slow');
});
 
$('img').mouseout(function(){
$("#tex").fadeIn('slow');
});
});
</script>
<style type="text/css">
#tex{
    position:absolute;
    color:white;
    font-size:40px;
}
 
 
#black{
background-image:url('http://www.uniaopedras.com.br/granitos/Preto%20Absoluto.jpg.JPG');
width:200px;
    height:200px;
}
 
img {
    display: block;
    opacity: 0.2;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -webkit-transition: All 0.3s ease-in-out;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: initial;
    width:200px;
    height:200px;
}
img:hover {
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}
 
</style>
</head>
 
<body>
<div id="tex">
    TEXTO
</div>
 
<div id="black">
    <img src="http://farm8.staticflickr.com/7183/6908744113_31404cea97_m_d.jpg" />
</div>
</body>
</html>

 

deu muito certo, só precisei adaptar aqui.

valeu Bru_ce!

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