Galeria de fotos


Vamos ver neste post como criar uma galeria de fotos onde, ao passar o mouse em cima da miniatura da foto, a foto de tamanho original aparecerá ao lado.

No exemplo abaixo utilizamos uma imagem default que aparecerá sempre que o mouse não estiver em cima de uma miniatura.



css:
	
	.galeria {
		width:680px; 
		margin:0 auto;
		text-align:left; 
		}
	.img-aqui { 
		background: #fff url('imagem inicial') center no-repeat; 
		width:500px; 
		height:375px; 
		position:relative; 
		top:8px;
		float:right; 
		border:1px solid #fff;
		}
	ul.fotos {
		position:relative;
		list-style:none;  
		width:162px;
		padding:1px;
		background:#000;
		margin:0; 
		padding:0; 
	}
	.fotos:after {
		display: block;
		content: ".";
		height: 0;
		font-size:0; 
		visibility: hidden;
		clear: both;
		}
	ul.fotos li {
		width:75px;
		height:50px;
		float:left; 
		border:2px solid #444;
		margin:1px; 
	}
	ul.fotos li img {
		border:none; 
		width:75px;
		height:50px;
	}
	ul.fotos li span img {
		border:none;
		width:500px;
		height:375px;
		height:auto;
	}
	ul.fotos a {
		display: block;
		} 
	ul.fotos a span {
		display: none;
	}
	ul.fotos a:hover span.legenda {
		display: block;
		text-align:center; 
		width:500px;
		position:absolute;
		top:375px;
		left:-2px;
	}
	ul.fotos a:hover span {
		display: block;
		position: absolute; 
		top:-5px; 
		left: 177px; 
		background:#fff;
		border:2px solid #666;
	   }
	ul.fotos a:hover span.legenda {
		padding:5px 0;
		color:#333; 
	}
html:
	






Comentários

Copyright © 2018 Anderson Bravo
www.andersonbravo.com.br
anderson@andersonbravo.com.br