Hoje trago uma funcionalidade simples mas útil e bem mais simples do que uma solução javascript a algum tempo ja podemos descartar javascript para fazer muitas coisas graças ao CSS e em breve com o novo HTML e CSS vamos poder incrementar ainda mais o CSS, javascript, e eliminar flash silverligth entre outros agora deixa de bla,bla,bla e vamos ao que enteressa bom o resultado do script abaixo vocês podem ver na imagem do carro logo abaixo basta passar o mouse na mesma e através deste código css vocês podem fazer adaptações da forma que vocês quiserem qual quer duvida pode postar que estarei respondendo o mais breve possível em breve vou começar uma seção de Post sobre HTML5 aguardem!
(Vou colocar varias palavras aqui só para simular um texto para vocês verem como a imagem se comporta)<style>
/* tira as margens do paragrafo*/
p{
margin:1em 0;
}
/* define o tamanho do texto*/
p.text{
width:500px;
}
/* define o tamanho da imagem, borda e como o texto se comporta ao redor dela */
.img img{
width:120px;
height:100px;
border:5px #999 double;
clear: left;
float: left;
margin-bottom: 1em;
margin-right: 1em;
}
/* aqui é onde alteramos o tamanho da imagem*/
a.img:hover img{
position:absolute; /* para ficar por cima do texto se retirada funciona tambem porem vai empurar o texto quando for redimencionada*/
width:300px; /* largura */
height:250px; /* altura */
}
</style>
<p class="text">
<a class="img" href="#"><img src="http://images.paraorkut.com/img/papeldeparede/1024x768/c/carro-4039.jpg" /></a>
xxxxxxxxx </p>
Nenhum comentário:
Postar um comentário