Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 285
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Efeito hover em imagens

04-10-2010 23:02

Olá!

Gostaria de saber como aplico efeito hover em umas 3 imagens com um mesmo código.

Por exemplo, vc tá num site de vídeo e lá, vc passa o mouse em cima do thumbnail de qualquer vídeo e aparece um player quase trasparente por cima.

Igual a esse meu blog-> http://videos.ordemdafenixbrasileira.com/

Passa o mouse nos thumbnails que vc vai entender melhor.

Como faço?
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Efeito hover em imagens

05-10-2010 09:16

Me pareceu 2 imagens no efeito, e não 3. Seria um efeito hover comum.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 285
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Efeito hover em imagens

06-10-2010 21:02

Exatamente: são 2 imagens.

O que eu quis dizer 'como posso aplicar o efeito em umas 3 imagens', usando CSS, 'com um mesmo código'.


Como transponho o player transparente por cima do thumbnail normal, que este ficará opaco com o passar do mouse?


Vlw!
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Efeito hover em imagens

06-10-2010 21:40

Dá uma olhada no link abaixo, tem um efeito parecido "imagem do urso dentro do iframe"
http://www.wildlifephoto.net/articles/w ... ction.html
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 285
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Efeito hover em imagens

31-10-2010 15:35

Sim... Mas, eu gostaria que a imagem opaca de "play" ficasse por cima do thumbnail do video... Como faço?!
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Efeito hover em imagens

31-10-2010 16:55

Montei um exemplo

CSS

<style> .base{width:180px;height:186px;} .video{ width:100px; height:100px; z-index:0; position:absolute; } .video2{ width:50px; height:50px; z-index:1; position:relative; display:none; } </style>

JS

<script> function Mascara(id, tipo) { if(tipo=="on") { document.getElementById(id).style.display='block'; } if(tipo=="off") { document.getElementById(id).style.display='none'; } } </script>

HTML

<div class="base"> <a href=""><img src="thumb_video.jpg" class="video" onmouseover="Mascara('f1','on')" onmouseout="Mascara('f1','off')" border="0"></a> <img src="thumb_play.jpg" id="f1" class="video2"> </div>

Cada div será um vídeo, e observe o f1, para repetir o efeito, copie todo o bloco da div, e renomeie, f2, f3, etc.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 285
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Efeito hover em imagens

07-11-2010 21:41

\o/


Funcionou certinho!

Obrigadão, Kléber! 8)
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/

Quem está online

Usuários navegando neste fórum: Bing [Bot]