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.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>