Jump to content

[Resolvido] Hover Effect ( 2 dúvidas )


Paulo1471
 Share

Recommended Posts

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 !!

__________________

Paulo Oliveira

Link to comment
Share on other sites

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.

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Link to comment
Share on other sites

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 !!

h1.PNG

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 by Paulo1471

__________________

Paulo Oliveira

Link to comment
Share on other sites

       .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.

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Link to comment
Share on other sites

	.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 !!

__________________

Paulo Oliveira

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.