Ir para conteúdo

POWERED BY:

Arquivado

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

Celinho

Transparencia na imagem

Por , em Desenvolvimento frontend

Recommended Posts

Celinho    0

Celinho
Postado

Bom estou tentando fazer com que assim que o mouse passe por cima da imagem, uma cor meio avermelhada apareça só que meio transparente, ainda dando pra ver a verdadeira imagem por tras dessa camada vermelha.. só que não consigo trazer a cor pra cima da imagem, ela só fica atras

 

<div class="transp">
           	<a href="#"><img src="images/image_1.jpg" width="250" height="160"/></a>
               <p>Projeto 1</p>
</div>

 

.transp{margin:20px 20px 50px 20px; float:left; width:265px; height:175px; border:1px solid #CECECE; background:#FFF;}
.transp img{padding:8px 8px;}
.transp p{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#666; text-align:center; margin-top:5px;}
.transp a:hover{background:#F00;}

 

Primeiro só estou tentando colocar o hover pra depois a transparencia, só que como eu disse, só fica por tras da imagem e não por cima dela.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Celinho    0

Celinho
Postado

Sim sim vou fazer isso André... mas o problema não é nem como fazer a transparência, é o hover que num ta funcionando =/... tipo, ele aparece atras da imagem e não por cima dela.. já tentei com cor e com uma imagem aleatória aqui e só mudar por trás

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Se você quiser que apareça por cima da imagem, o ideal é fazer uma máscara com posição absoluta, e que tenha como fundo esse PNG transparente, ou uma cor sólida com transparência em CSS.

 

Mas sinceramente, fazendo o hover na imagem, e deixando ela transparente no CSS, com uma cor sólida atrás, dá praticamente na mesma em efeitos visuais. :thumbsup:

 

Só pra ficar de exemplo, veja como nos dois casos ficam bem semelhantes:

 

<!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=iso-8859-1" />
<title>Teste</title>
<style type="text/css">
.teste, .teste2 {
display: inline-block;
float: left;
margin: 0 25px;
border: 1px solid #ccc;
box-shadow: 1px 1px 3px #999;
width: 220px;
padding: 10px 0;
font: 13px/1.8 Arial, Helvetica, sans-serif;
color: red;
position: relative;
border-radius: 6px;
}
.teste span, .teste2 > span {
display: inline-block;
width: 200px;
margin: 0 10px;
}
.teste span:first-child {
background: red;
}
.teste:hover img {
opacity: .4;
}
.teste2 span span {
background: red;
width: 200px;
height: 150px;
position: absolute;
opacity: .4;
display: none;
}
.teste2:hover span span {
display: inline-block;
}
</style>
</head>

<body>
<a class="teste" href="http://forum.imasters.com.br">
<span>
	<img src="http://lorempixel.com/output/nightlife-q-c-200-150-2.jpg" alt="Image description" />
</span>
<span>Lorem ipsum dolor</span>
</a>
<a class="teste2" href="http://forum.imasters.com.br">
<span>
	<span></span>
	<img src="http://lorempixel.com/output/nightlife-q-c-200-150-2.jpg" alt="Image description" />
</span>
<span>Lorem ipsum dolor</span>
</a>
</body>
</html>

 

No primeiro utilizei um fundo sólido atrás da imagem, e a imagem fica transparente. No segundo foi usado uma máscara semi-transparente por cima da imagem. :thumbsup:

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