CSS3 – Vyjíždějící popis u obrázku

Webdesign

POZOR! Článek jsem napsal před více jak rokem, a tudíž už nemusí reflektovat můj nynější názor nebo může být zastaralý.

V novém designu webu používám vyjíždějící popis u obrázků (konkrétně u referencí).

Je to jednoduchý styl:

.obrazek {
	height: 176px;
	width: 281px;
}

.obrazek  .obrazek-in {
	width: 281px;
	height: auto;
	border: 1px #ddd solid;
}

.obrazek:hover  .obrazek-in {
	border-color: #aaa;
	box-shadow: 0 0 4px #ccc;
}

.obrazek .obrazek-in .obrazek-popis {
	background: #fff;
	height: 0px;
	overflow: hidden;
	border-color: #ddd;
	padding: 0 5px;	
	transition: all .3s;
}

.obrazek:hover .obrazek-in  .obrazek-popis {
	border-top: 1px #ddd solid;
	height: 53px;
}

.obrazek img {
	width: 281px;
	display: block;
}

Obrázek má poté takovouto strukturu:


	

		
		

			
Popis obrázku.

Názorná ukázka.

Znáte někoho, komu by článek mohl pomoct? Zasdílejte mu ho :)

Komentáře