Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Wappen in per CSS animiertem Bild einfügen 1

Wappen in per CSS animiertem Bild einfügen 1

Hallo, ich habe mir von der Seite http://littlesnippets.net/ein Schnipsel geholt und möchte ihn bei mir auf der Seite einbinden.

Der hier verwendete Code

<style> figure{ font-family: 'Tahoma', Arial, sans-serif; position: relative; float: left; overflow: hidden; margin: 10px 1%; width: 235px; height: 300px; color: red; text-align: left; background-color: #f89406; font-size: 16px; } figure img { width: 100%; box-sizing: border-box; transition: all 0.35s ease; transition-delay: 0.2s; backface-visibility: hidden; } figcaption { position:absolute; top: 30%; left: 0; transform: scale(0.5); transform-origin: 50% 0%; z-index: 0; opacity: 0; padding: 0 30px; } figure:hover>figcaption{ width:80%; height:auto; display:block; position:absolute; top: 0%; left: 0; transform: scale(1); opacity: 1; z-index:23; transition: all 0.85s ease; } figcaption>img{ width:50%; margin:10px 0 0 10px; height:50%; } figure h3, figure p { line-height: 1.5em; } figure. h3 { margin: 0; font-weight: 800; text-transform: uppercase; } figure p { font-size: 0.8em; font-weight: 500; margin: 0 0 15px; } .read-more { border: 2px solid #ffffff; padding: 0.5em 1em; font-size: 0.8em; text-decoration: none; color: #ffffff; display: inline-block; } figure.snip1455 .read-more:hover { background-color: #ffffff; color: #000000; } figure:hover>img { animation: snip1455 0.45s linear forwards 1; } @keyframes snip1455 { 50% { -webkit-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(150%); transform: scale(0.8) translateX(150%); opacity: 0; } } </style> <figure class="snip1455"> <img src="/image/kermit_.jpg" alt="Günther Frieß" /> <figcaption> <img src="/image/forum-4b225c.svg" alt="MCV" /> <h3>Günther Frieß</h3> <p>Präsident<br />Kreisnarrenring Obernburg</p><a href="#" class="read-more">Kontakt</a> </figcaption> </figure> <figure class="snip1455"><img src="/image/kermit_.jpg" alt="Othmar Morczinczyk" /> <figcaption> <img src="/image/forum-4b225c.svg" alt="NCV" /> <h3>Othmar Morczinczyk</h3> <p>Vizepäsident<br />Kreisnarrenring Obernburg</p><a href="#" class="read-more">Kontakt</a> </figcaption> </figure> <figure class="snip1455"><img src="/image/kermit_.jpg" alt="Werner Schmitt" /> <figcaption> <img src="/image/forum-4b225c.svg" alt="MCV" /> <h3>Werner Schmitt</h3> <p>Schatzmeister<br />Kreisnarrenring Obernburg</p><a href="#" class="read-more">Kontakt</a> </figcaption> </figure> <figure class="snip1455"><img src="/image/kermit_.jpg" alt="Werner Schmitt" /> <figcaption> <img src="/image/forum-4b225c.svg" alt="MCV" /> <h3>Christine Braun</h3> <p>Schriftführerin<br />Kreisnarrenring Obernburg</p><a href="#" class="read-more">Kontakt</a> </figcaption> </figure>