Wappen in per CSS animiertem Bild einfügen
Hallo,
ich habe mir von der Seite http://littlesnippets.net/ ein Schnipsel geholt und möchte ihn bei mir auf der Seite einbinden.
Wenn ich im CSS-Code an dieser Stelle:
Den Wert translateX auf 0% ändere, sieht man zwar das eingefügte Image (Wappen), aber das Hintergrundfoto (Kermit) fährt nicht mehr nach rechts heraus und bleibt sichtbar.
Hier zu sehen: http://uebung.mcv-moemlingen.n…-ueber-uns/das-praesidium
Es sollte eigentlich so wie in der Originalversion sein, dass das Kermit-Foto nach rechts herausfährt und dann das Wappen mit dem Namen und Kontakt-Button erscheint.
Das Umstellen des Wertes opacity bringt leider auch nichts.
Da ich in CSS noch nicht die große Ahnung habe, wollte ich fragen, ob mir auch hier jemand helfen könnte?
100% {
-webkit-transform: scale(0.8) translateX(150%);
transform: scale(0.8) translateX(150%);
opacity: 0.5;
}Der hier verwendete Code
<style>
figure.snip1455 {
font-family: 'Tahoma', Arial, sans-serif;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
width: 285px;
height: 350px;
color: red;
text-align: left;
background-color: #f89406;
font-size: 16px;
}
figure.snip1455 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
figure.snip1455 img {
max-width: 100%;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
backface-visibility: hidden;
}
figure.snip1455 figcaption {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: scale(0.5) translate(0%, -50%);
transform: scale(0.5) translate(0%, -50%);
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
z-index: 1;
opacity: 0;
padding: 0 30px;
}
figure.snip1455 h3,
figure.snip1455 p {
line-height: 1.5em;
}
figure.snip1455 h3 {
margin: 0;
font-weight: 800;
text-transform: uppercase;
}
figure.snip1455 p {
font-size: 0.8em;
font-weight: 500;
margin: 0 0 15px;
}
figure.snip1455 .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.snip1455:hover>img,
figure.snip1455.hover img {
-webkit-animation: snip1455 0.45s linear forwards;
animation: snip1455 0.45s linear forwards;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
figure.snip1455:hover figcaption,
figure.snip1455.hover figcaption {
-webkit-transform: scale(1) translate(0, -50%);
transform: scale(1) translate(0, -50%);
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
figcaption>img{
width:70%;
}
@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.5;
}
}
</style>
<figure class="snip1455"><img src="/image/1.png" alt="Othmar Morczinczyk" />
<figcaption>
<img src="/image/2.png" alt="NCV" />
<h3>Othmar Morczinczyk</h3>
<p>Vizepäsident<br />Kreisnarrenring Obernburg</p><a href="#" class="read-more">Kontakt</a>
</figcaption>
</figure>