Simpelt billedgalleri med CSS

Et simpelt CSS3 billedgalleri hvor der er benyttet forskellige CSS effekter.
Tiden (transition) på selve effekterne (transform) er ens. Hvis man begynder at ændre, hvornår de forskellige effekter skal begynde og slutte, vil man kunne forbedre galleriet mærkbart. Men mere om det en anden gang.

Browser kompatibilitet: Ja når de få der stadig benytter Internet Explorer, har opdateret til IE10, kan de få glæde af billedgallerier kodet kun med CSS. Vi andre kan heldigvis allerede nu!

Opacity

Opacity og Scale

Opacity og Skew

Opacity, Scale, Translate og Rotate

CSS

.galleri {
  position: relative;

  overflow: hidden;
  background: #999;
  width: 80%;
  border-radius: 2em;
  box-shadow: 3px 3px 3px #666;
}
.galleri dt  {
  width: 150px;
  height: 150px;
  margin: 1em;
  cursor: pointer;
  border-radius: 2em;
  box-shadow: 3px 3px 3px #666;
  overflow: hidden;
  -webkit-transition: 1s all;
}
.galleri dt:hover {
  box-shadow: 3px 3px 3px #fff;
}
.galleri dd {
  position: absolute;
  left : 200px;
  top: 8em;
  height: 400px;
  width: 500px;
  background: blue;
  opacity: 0;
  -webkit-transition: 1.5s all;
}

.galleri dt:hover + dd {
   opacity: 1;
}

.galleri.id2 dd {
  -webkit-transform: scale(0);
}
.galleri.id2 dt:hover + dd {
  -webkit-transform: scale(1);
}


.galleri.id3 dd {
  -webkit-transform: skewY(180deg);
}
.galleri.id3 dt:hover + dd {
  -webkit-transform: skewY(0deg);
}

.galleri.id4 dd {
  -webkit-transform: translateX(500px) scale(0) rotate(365deg)skewY(30deg);
  -webkit-transition: 3s all;
}
.galleri.id4 dt:hover + dd {
  -webkit-transform: translateX(0px) scale(1) rotate(0deg)skewY(0deg);
}

HTML

<dl class="galleri">
  <dt><img src=".../fugl_thumb.jpg" alt="" /></dt>
  <dd><img src=".../fugl.jpg" alt="" /></dd>
  <dt><img src=".../sea_thumb.jpg" alt="" /></dt>
  <dd><img src=".../sea.jpg" alt="" /></dd>
  <dt><img src=".../svane_thumb.jpg" alt="" /></dt>
  <dd><img src=".../svane.jpg" alt="" /></dd>
  <dt><img src=".../tiger_thumb.jpg" alt="" /></dt>
  <dd><img src=".../tiger.jpg" alt="" /></dd>
</dl>