Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 D'Leandro™

avatar
Fundador

Galeria Hipper Hover


PunBB PhpBB2  PhpBB3  Invision  Blog  Site
--> Código CSS <--
Código:
/*Galeria Hipper Hover*/
.gallery {
    margin: 100px auto 0px;
    width: 700px;
    height: 950px;
}
.gallery a {
    display: inline-block;
    height: 135px;
    position: relative;
    width: 180px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.gallery a img {
    border: 8px solid #fff;
    border-bottom: 20px solid #fff;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
    -moz-box-shadow: 2px 2px 4px #444;
    -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;
}
.gallery a:nth-child(1) img {
    -moz-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    transform: rotate(-25deg);
}
.gallery a:nth-child(2) img {
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
.gallery a:nth-child(3) img {
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
.gallery a:nth-child(4) img {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.gallery a:nth-child(5) img {
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.gallery a:nth-child(6) img {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.gallery a:nth-child(7) img {
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}
.gallery a:nth-child(8) img {
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}
.gallery a:nth-child(9) img {
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}
.gallery a:nth-child(10) img {
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
.gallery a:nth-child(11) img {
    -moz-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
}
.gallery a:nth-child(12) img {
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
.gallery a:focus img {
    cursor: default;
    height: 250%;
    left: -150px;
    top: -100px;
    position: absolute;
    width: 250%;
    z-index: 25;
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

--> HTML da Galeria <--
Código:
<div class="gallery" style=''>
    <a tabindex="1"><img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/ImagemPB/imagem1.jpg"></a><a tabindex="2"><img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/ImagemPB/imagem1.jpg"></a><a tabindex="3"><img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/ImagemPB/imagem1.jpg"></a><a tabindex="4"><img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/ImagemPB/imagem1.jpg"></a>
    <a tabindex="5"><img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/ImagemPB/imagem1.jpg"></a><a tabindex="6"><img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/ImagemPB/imagem1.jpg"></a><a tabindex="7"><img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/ImagemPB/imagem1.jpg"></a><a tabindex="8"><img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/ImagemPB/imagem1.jpg"></a>
    <a tabindex="9"><img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/ImagemPB/imagem1.jpg"></a><a tabindex="10"><img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/ImagemPB/imagem1.jpg"></a><a tabindex="11"><img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/ImagemPB/imagem1.jpg"></a><a tabindex="12"><img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/ImagemPB/imagem1.jpg"></a>
</div>
Demonstração



Desenvolvido por D'Leandro™ | Script-Tutorials
Editado e Postado por 2012 © Staffer Group BR™
Ver perfil do usuário

#2
 Vargas

avatar
Moderador
Tutorial Aceito;
Este tutorial foi aceito e movido para a área correspondente!

Assinatura:
Esse é o Meu, Esse é o Seu, Esse é o Nosso Brasil!
Ver perfil do usuário

#3
 Gmtp

avatar
Membro
Olá

Belo tuturial, vo usar em meu fórun, Obrigado por ele

Até mais
Ver perfil do usuário

#4
 Stark'

avatar
Membro
'-' Muito Legal '-'''''
Ver perfil do usuário

#5
 Nemesis

avatar
Novato
Muito legal! :D
Ver perfil do usuário

#6
 fojogo

avatar
Membro
Muito bom mesmo, adorei, vai ser otimo pro meu forum de design. A proposito, se cadastra lá http://royal-arts.forumeiros.com
Ver perfil do usuário

#7
 Master Publicitario

avatar
Membro
Muito bom!
Ver perfil do usuário

#8
 Conteúdo patrocinado