Publicado em 27 de mai.

Texto por cima de imagem

#desenvolvimento-frontend

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.

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Bru_ce· 27 de mai.

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>

carlera· 27 de mai.

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!