CSS lightbox com detalhes

Eu vi recentemente um truque que chamou minha atenção e eu pensei que era uma maneira muito inteligente de mostrar mais detalhes sobre um elemento quando pasar o mouse sobre ele. Decidi experimentá-lo e a solução foi bastante simples.

Por Programação Pular para comentários
CSS lightbox com detalhes

Eu vi recentemente um truque que chamou minha atenção e eu pensei que era uma maneira muito inteligente de mostrar mais detalhes sobre um elemento quando pasar o mouse sobre ele. Decidi experimentá-lo e a solução foi bastante simples.

http://stblog.tanaka.netdna-cdn.com/wp-content/uploads/demo1.jpg


HTML


As colunas são compostas de itens de lista não ordenada, dentro de cada item da lista é a imagem em miniatura e os detalhes do item embrulhado em uma classe de "info" .
  • CSS lightbox com detalhes

    Title

    Short Description



http://stblog.tanaka.netdna-cdn.com/wp-content/uploads/htmldemo2.jpg


CSS


Comece pelo estilo dos itens da lista. Observe que adicionamos position: relative; ao item de lista, e em foco levantamos a z-index para 99 para que ele levanta sobre os outros elementos.
/*--Column Styles--*/
ul.columns {
	width: 960px;
	list-style: none;
	margin: 0 auto; padding: 0;
}
ul.columns li {
	width: 220px;
	float: left; margin-right:15px; display: inline;
	margin: 10px; padding: 0;
	position: relative;
}
ul.columns li:hover {z-index: 99;}


Nós adicionar um position: relative; à imagem, bem como, para que possamos controlar o z-index valor em foco. O que queremos fazer aqui é para diminuir a opacidade da imagem, por padrão para 30%, em seguida, em foco, aumente a opacidade para 100% e levantar a imagem, aumentando o z-index valor para 999. Isso permitirá que o thumbnail passe para cima dos elementos .info .
/*--Thumbnail Styles--*/
ul.columns li img {
	position: relative;
	filter: alpha(opacity=30);
	opacity: 0.3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*--IE8 Specific--*/
}
ul.columns li:hover img{
	z-index: 999;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}


http://stblog.tanaka.netdna-cdn.com/wp-content/uploads/css_demo2.jpg


/*--Details Style--*/
ul.columns li .info {
	position: absolute;
	left: -10px; top: -10px;
	padding: 210px 10px 20px;
	width: 220px;
	display: none;
	background: #fff;
	font-size: 1.2em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
ul.columns li:hover .info {display: block;}

ul.columns li h2 {
	font-size: 1.2em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 10px 0;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}


Considerações Finais


Vá em frente e experimentar esta técnica! Se você tiver dúvidas ou preocupações, por favor, não hesite em me avise. Para aqueles preocupados com esta técnica trabalhando no IE6, você pode usar alguns truques jQuery para contornar o problema hover.

tutorial_popout.zip

Compartilhe com seus amigos:
Thauan Almeida
Thauan Almeida É desenvolvedor Flash, Joomla e Programação. E aqui na Oficina da Net mostrará tutoriais sobre a ferramenta da Adobe e os outros citados acima.
FACEBOOK //
Quer conversar com o(a) Thauan, 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.