Effektvoller Slider mit CSS3

Im Zuge der Neugestaltung von www.oppisworld.de habe ich auch die Sieben Weltwunder überarbeitet. Der Slider wurde ohne Javascript, mit reinem CSS3 erstellt.
Er funktioniert ab Internet Explorer 9 sowie in allen aktuellen Versionen der anderen Browser (Safari/MAC kann ich leider nicht testen).

HTML

<dl id="wwkarte">
  <dt><span title="Karte der Sieben Weltwunder &copy; OPPI 2004-2015">Die Sieben Weltwunder der Antike</span></dt>
  <dd id="pyramiden"><a href="wunder01.html"><span>Die Pyramiden von Gizeh in &Auml;gypten</span></a></dd>
  <dd id="babylon"><a href="wunder02.html"><span>Die H&auml;ngenden G&auml;rten der Semiramis in Babylon</span></a></dd>
  <dd id="olympia"><a href="wunder03.html"><span>Die Zeus-Statue in Olympia</span></a></dd>
  <dd id="ephesos"><a href="wunder04.html"><span>Der Tempel der Artemis in Ephesos</span></a></dd>
  <dd id="mauso"><a href="wunder05.html"><span>Das Mausoleum zu Halikarnassos</span></a></dd>
  <dd id="rhodos"><a href="wunder06.html"><span>Der Koloss von Rhodos</span></a></dd>
  <dd id="alex"><a href="wunder07.html"><span>Der Leuchtturm von Alexandria</span></a></dd>
</dl>

CSS


dl#wwkarte{background:#ddd url(wwkarte.jpg) no-repeat 50% 50%;background-size:cover;margin:15px auto;padding:0 0 56.25% 0;height:0;width:100%;position:relative;overflow:hidden;}
dl#wwkarte dt{background:#000;background:rgba(0,0,0,0.5);color:#fff;padding:5px 10px;position:absolute;top:0;left:0;width:100%;box-sizing:border-box;z-index:9999;}
dl#wwkarte dd a,dl#wwkarte dd a:hover{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;border-left:1px solid #fff;cursor:pointer;display:block;height:100%;position:absolute;bottom:0;text-decoration:none;width:14.29%;-webkit-transition: 1s ease-in-out;transition: 1s ease-in-out}

dl#wwkarte dd#pyramiden a{background-image:url(gise.jpg);left:0;z-index:10}
dl#wwkarte dd#babylon a{background-image:url(babylon.jpg);left:14.29%;z-index:11}
dl#wwkarte dd#olympia a{background-image:url(zeus.jpg);left:28.58%;z-index:12}
dl#wwkarte dd#ephesos a{background-image:url(ephesos.jpg);left:42.87%;z-index:13}
dl#wwkarte dd#mauso a{background-image:url(halikarn.jpg);left:57.16%;z-index:14}
dl#wwkarte dd#rhodos a{background-image:url(koloss.jpg);left:71.45%;z-index:15}
dl#wwkarte dd#alex a{background-image:url(pharos.jpg);left:85.74%;z-index:16}

dl#wwkarte dd#pyramiden a:hover,
dl#wwkarte dd#babylon a:hover,
dl#wwkarte dd#olympia a:hover,
dl#wwkarte dd#ephesos a:hover,
dl#wwkarte dd#mauso a:hover,
dl#wwkarte dd#rhodos a:hover,
dl#wwkarte dd#alex a:hover{left:0;right:0;width:100%;z-index:9998;}

dl#wwkarte dd a span{background:#000;background:rgba(0,0,0,0.5);color:#fff;display:block;padding:5px 10px;position:absolute;bottom:0;left:0;width:100%;box-sizing:border-box;}

@media only screen and (max-width: 640px) {
dl#wwkarte dt{top:auto;bottom:0;}
dl#wwkarte dd a span{display:none}
}

Zur Demo

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (1 votes, average: 5,00 out of 5)
Loading...

Weitere Artikel aus dieser Kategorie


Kein Kommentar zu diesem Artikel bisher »

Kommentieren

Erlaubtes XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>