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

Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17235
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Expandir imagem no onmouseover

03-09-2008 10:18

Esse script ( estilo ) permite expandir uma imagem no onmouseover sem alterar seu layout.

É importante que todas as imagens em tamanho real ( ampliada ) tenham o mesmo tamanho.

<style type="text/css"> p.thumb{ float:left; margin:.5em 0; margin-right:10px; border:1px solid #999; padding:2px; clear: left; } p.thumb a{ display:block; float:left; width:100px; height:100px; line-height:100px; overflow:hidden; position:relative; z-index:1; } p.thumb a img{ float:left; position:absolute; top:-50%; left:-50%; } /* mouse over */ p.thumb a:hover{ position:relative; left:50px; top:50px; overflow:visible; z-index:1000; border:none; } /* é importante que todas as imagens tenham o mesmo tamanho defina width e height abaixo */ p.thumb a:hover img{ border:1px solid #999; background:#fff; padding:2px; width:567px; height:442px; } </style> <div height="100px;"> <p class="thumb"><a href="#"><img src="figura.jpg" border="0" alt="" width="150" height="150"></a></p> <p class="thumb"><a href="#"><img src="figura.jpg" border="0" alt="" width="150" height="150"></a></p> </div>

0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado