Galeria com miniatura deslizante usando CSS3

Hoje eu vou deixar uma dica de galeria bem legal, com um efeito bem interessante. As miniaturas têm um efeito deslizante. Somente um pedaço da miniatura é exibida e quando há o hover (posicionamento do mouse em cima da miniatura), ela abre por completo. Neste caso não usei Jquery e sim CSS3.

Por Programação Pular para comentários
Galeria com miniatura deslizante usando CSS3

Olá pessoal! Hoje eu vou deixar uma dica de galeria bem legal, com um efeito bem interessante. As miniaturas têm um efeito deslizante. Somente um pedaço da miniatura é exibida e quando há o hover (posicionamento do mouse em cima da miniatura), ela abre por completo. Neste caso não usei Jquery e sim CSS3. Vamos lá?

Esse é o exemplo pronto:



HTML
Galeria com miniatura deslizante usando CSS3
Galeria com miniatura deslizante usando CSS3
Galeria com miniatura deslizante usando CSS3
Galeria com miniatura deslizante usando CSS3
Galeria com miniatura deslizante usando CSS3
Galeria com miniatura deslizante usando CSS3
Galeria com miniatura deslizante usando CSS3
Galeria com miniatura deslizante usando CSS3


CSS


Vamos entender o que ocorre agora, começando pelo HTML.


  • A DIV com a class corpo é somente um container pra abrigar as 2 linhas de imagens.
  • Cada DIV com a class galeria é a que faz a separação de cada linha com 4 fotos e cada foto está dentro de uma DIV com a class foto.
  • A class foto, por dua vez, é quem recebe o efeito de transição do CSS3. Como há fotos dentro dela, essas fotos irão receber o efeito.


Agora vamos entender o CSS que é aonde a mágica toda acontece

  1. A class corpo só diz que a DIV principal (container) deve ter 800px de largura e margem 20px top (cima) e 50px left (esquerda)
  2. A class galeria, responsável por cada linha com as fotos, deve ter 800px de largura, 210px de altura e flutuada a esquerda na tela.


Até aqui nenhum mistério, posicionamos as divs de conteúdo. A class foto é aonde definimos o efeito, vamos detalha-la.Primeiro, definimos que todas as fotos vão ficar flutuadas a esquerda. Por isso elas ficam uma na frente da outra e não abaixo.
float: left; margin-right:15px;

Depois definimos a largura da foto, sendo que, essa largura é o pedaço da miniatura que vai ser mostrada. Se olharmos a foto original, veremos que a largura total dela é 310px. A largura só será 310px quando colocarmos o mouse em cima.
width: 150px;

Na próxima linha só escondemos a rolagem da div.
overflow: hidden;

Nesta linha definimos o espaçamento entre as fotos. Espaço de 10px a direita e 5px abaixo.
margin: 0 10px 5px 0;

Nesta linha é onde o efeito é definido:
-webkit-transition: width 1s ease-in;

O efeito de transição vai afetar a largura (width), será executado em 1 segundo (1s), com o tipo de transição chamado ease-in. Aí pensamos: Legal, não colocamos a largura final, como ele sabe onde parar? Isso é definido pela próxima e última class... a foto:hover, quando posicionamos o mouse em cima da div com a class foto.
.foto:hover {
    width: 310px;
}

Nesta class definimos que, quando posicionarmos o mouse em cima da foto, a largura da foto passa a ser 310px. Só que ele fará isso deslizando, graças ao efeito definido na class anterior.

Observações:
Por que temos 3 linhas pra definir o efeito?
-webkit-transition: width 1s ease-in
-moz-transition: width 1s ease-in; 
-o-transition: width 1s ease-in;


Todas elas definem a mesma coisa, o mesmo tipo de efeito, mas cada uma é interpretada por um grupo de navegadores, veja abaixo:
  • -webkit, para browsers como Chrome e Safári
  • -moz para o Firefox
  • -o para Opera

Tá, mas e o IE? Infelizmente o IE não aceita esse efeito.


Para aprimorar...


Para conhecimento, existem mais 4 tipos de efeito além do ease-in:
  • linear
  • ease
  • ease-in-out
  • ease-out

Sugiro que você troque para cada tipo e veja no navegador o efeito que dá. Até a próxima galera.

Compartilhe com seus amigos:
Mais sobre: CSS3, jquery, efeitos
Suelen Braga
Suelen Braga Sou web designer há 1 ano e meio, adoro experimentar algumas animações com JQuery, JQuery e AJAX, PHP e passar às outras pessoas, ajudando no dia-a-dia do desenvolvedor web. Estou estudando também sobre HTML5 e CCS3.
FACEBOOK // TWITTER: @suelenbraga2006
Quer conversar com o(a) Suelen, comente:
Carregar comentários
Últimas notícias de Programação
  • Google usa Mulher-Maravilha para ajudar meninas a programar

    Google usa Mulher-Maravilha para ajudar meninas a programar

    Meninas ganham um incentivo extra na hora de aprender a programar, a Mulher-Maravilha.

  • Criando um cadastro de usuário em Java

    Criando um cadastro de usuário em Java

    O objetivo deste artigo é desenvolver uma aplicação em JSE (Java Standard Edition) de inserção de dados utilizando alguns padrões de projeto.

  • Quer aprender PHP? Saiba mais

    Quer aprender PHP? Saiba mais

    Chegou o tão aguardado curso online de PHP do Oficina da Net. Você não pode perder. PHP é uma das linguagens mais usadas no mundo. Os conteúdos que vou mostrar no curso, são exatamente o que você precisa saber para iniciar sua carreira como programador.

  • Formulário de contato em php

    Formulário de contato em php

    Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

  • Como fazer um GIF?

    Como fazer um GIF?

    Aprenda a criar um GIF animado de vídeos. Descubra como criar os GIFs, imagens animadas que você vê em na internet.

  • O que priorizar na hora de escolher o hosting para seu site?

    O que priorizar na hora de escolher o hosting para seu site?

    Com o crescimento das ofertas na web, saiba o que você deve levar em consideração na hora de escolher a melhor empresa de hosting para seu empreendimento

  • O que preciso fazer para criar um aplicativo?

    O que preciso fazer para criar um aplicativo?

    Temos visto que desenvolver aplicativos que visam o mercado mobile pode ser mais que uma alternativa rentável, pode colocá-lo no topo, deixá-lo rico. Mas nem tudo são flores, e o aspirante a desenvolvedor de app precisa seguir algumas regras.

  • WEBINAR 3.9

    WEBINAR 3.9

    Venha para o Maker e descubra como tornar o seu negócio mais competitivo.