[Resolvido] Hover Effect ( 2 dúvidas )

[Paulo1471]

Boas !!

Tenho o seguinte código:

ul#lista img {
 border:7px solid white;
 display: block;
 /*height:150px;
 width:250px;*/
}
ul#lista img:hover {
 opacity:0.3;
}

Queria que no 'hover effect' aparecesse uma especie de sombra na imagem (algo semi-transparente por cima) !!

Tentei com o 'opacity' mas não é bem o que queria, porque só queria na imagem, não no border , se me entendem !!

Sugestões ?

Para além, tava a pensar juntar um link(inicialmente como 'hidden') por cima dessa sombra !! Como faço em CSS para quando o 'hover' for 'activado' a o link ficasse visivel ?

Se não me expliquei bem, avisem !! Obrigado !!

[brunoais]

Podes fazer algo no paint (ou equivalente) ou mostrar algo que exista como exemplo para eu ver?

Se poderes seria útil. Não sei exatamente o que queres.

[Paulo1471]

Podes fazer algo no paint (ou equivalente) ou mostrar algo que exista como exemplo para eu ver?

Se poderes seria útil. Não sei exatamente o que queres.

Não me expliquei bem !!

Por cima da imagem tem um fundo preto com um dado valor de opacidade e algum texto/imagem !!

Fiz isto com o seguinte código:

<div class='wrapper'>
<img src='tracks_one.jpg'/>
<div class='description'>
<p class='description_content'>Legenda</br><img src="zoom.png"></p>
</div>
</div>

div.wrapper{
float:left; /* important */
position:relative; /* important(so we can absolutely position the description div */
}
div.description{
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
left:0px;
width:100%;
height:100%;
/* styling bellow */
background-color:black;
font-family: 'tahoma';
font-size:15px;
color:white;
opacity:0.5; /* transparency */
filter:alpha(opacity=60); /* IE transparency */
}
p.description_content{
padding:10px;
margin:0px;
}

Mas queria que o tal fundo e a legenda só aparece no hover .

E se possível claro , nao usar tanto codigo html, so a imagem e uma div a legenda, o efeito .

Edited July 31, 2012 at 01:17 PM by Paulo1471

[brunoais]

       .mytry {
           position:absolute;
           float:left;
           background-color: #000000;
       }

       .mytry > img{
           opacity:1;
       }

       .mytry > img:hover{
           opacity:0.5;
       }

  <div>
       <div class="mytry" style=""><img src='h1.png' ></div>
   </div>

Experimenta isto como ponto de começo. Não está completo mas já pode ser algo como o que queres.

[Paulo1471]

	.mytry {
		position:absolute;
		float:left;
		background-color: #000000;
	}

	.mytry > img{
		opacity:1;
	}

	.mytry > img:hover{
		opacity:0.5;
	}

  <div>
	<div class="mytry" style=""><img src='h1.png' ></div>
</div>

Experimenta isto como ponto de começo. Não está completo mas já pode ser algo como o que queres.

Tentei algo semelhante com outro codigo que tinha e funcionou !!

Só falta fazer a legenda, com jquery ou algo assim !!

Thanks !!