Klaus Oppermann - Webdesign & Fotografie

Bildergalerie mit Hover-Effekt, realisiert mit einer einfachen Liste und purem CSS. Die Bilder liegen in einer Größe vor und werden durch CSS-Angaben vergrößert, sobald man mit der Maus darüberfährt. Getestet mit Firefox 2.x, IE 7, IE 6, Opera 9.x.

HTML:

<ul class="clearfix vb">
<li><a href="#"><img src="images/13_01.jpg" alt="Foto" /></a></li>
<li><a href="#"><img src="images/13_02.jpg" alt="Foto" /></a></li>
<li><a href="#"><img src="images/13_03.jpg" alt="Foto" /></a></li>
</ul>

CSS:

#content ul.vb {
  margin: 15px 0 0 20px;
}

#content ul.vb li {
  background-image: none;
  float: left;
  height: 100px;
  list-style: inline;
  margin: 5px;
  padding: 0;
  width: 150px;
}

#content ul.vb li a {
  display: block;
  float: left;
  height: 100px;
  line-height: 100px;
  margin: 0;
  padding: 0;
  position: relative;
  width: 150px;
  z-index: 1;
}

#content ul.vb li a:hover,
#content ul.vb li a:focus {
  border: none;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1000;
}

#content ul.vb li a img {
  border: 1px solid #016194;
  float: left;
  height: 100px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
}

#content ul.vb li a:hover img,
#content ul.vb li a:focus img {
  border: 1px solid #003755;
  float: left;
  height: 233px;
  left: 0;
  position: absolute;
  top: 0;
  width: 350px;
}

Kategorie/n: Fotografie • WebdesignTags: CSS, Fotos, Fotothema, HTML