basti1012.bplaced.net

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

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>