Vzhůru dolů

CSS řešení: fotogalerie se zvětšením po najetí myši

Tohle řešení není žádná věda, ale můžete si tady hezky osvojit principy progressive enhancement a taky se třeba naučit obrázky s kulatými rohy. ;-)

Demo >

Základní funkčnost je jednoduchá: Absolutně pozicovaný element (zelený .photo) leží uvnitř relativně pozicovaného (fialového .photo_contai­ner):

.photos .photo_container {
  position: relative;
  float: left;
  width: 150px;
  height: 100px;
}

.photos .photo {
  position: absolute;
  z-index: 90;
}

Po najetí myši se pomocí záporného vnějšího okraje vnitřní element vytáhne za hranice vnějšího a zvýšením z-indexu překryje vedlejší elementy:

.photos .photo:hover,
.photos .photo:focus,
.photos .photo:active {
  z-index: 100;
  width: 240px;
  height: 160px;
  margin-top: -30px;
  margin-left: -45px;
}

Je tady ovšem jeden problém — pokud chceme obrázky vylepšit kulatými rohy, ve Webkit prohlížečích je musíme umístit na pozadí elementu.

Jenže my zároveň chceme obrázky jako samostatné elementy v dokumentu, abychom nabídli základní funkčnost také lidem se staršími prohlížeči včetně MSIE do verze 8.

Pomůžeme si trikem s nulovou neprůhledností (opacity). Ve standardních prohlížečích umístíme obrázky na pozadí obalujícího elementu. Ve starších prohlížečích jež opacity neznají pak pracujeme s obrázkem z dokumentu:

.photos .photo img {
  opacity: 0;
  z-index: 90;
  position: absolute;
  width: 150px;
  height: 100px;
}

.photos .photo {
  position: absolute;
  z-index: 90;
  width: 150px;
  height: 100px;
  background-size: 150px 100px;
}

.photos .photo.first
  { background-image: url('photo_1.jpg'); }

Podívejte se na plný kód — obsahuje všechny varianty CSS3 vlastností pro transitions, kulaté rohy a stínování.

V MSIE 8 a novějších pak bude výsledná galerie bez všech CSS3 efektů. Nicméně plně použitelná:

Doplněno: V MSIE 6 a 7 se fotogalerie musí obejít bez zvětšování po najetí myši. Základní funkčnost ale zůstává nezměněná.