|
|||
Zentrieren von per CSS animierten Bilden
Hallo,
ich habe mir von der Seite LittleSnippets.net - A free collection of CSS3/HTML snippets. New entries crafted and added daily. ein Schnipsel geholt und möchte ihn bei mir auf der Seite einbinden. Der CSS Code sieht wie folgt aus: Code:
figure.snip1455 { font-family: 'Tahoma', Arial, sans-serif; position: relative; float: left; overflow: hidden; margin: 10px 1%; min-width: 230px; max-width: 315px; max-height: 230px; width: 100%; color: red; text-align: left; /*color: #ffffff; background-color: #07090c; */ 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; } @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; } } HTML-Code:
<figure class="snip1455"> <img src="images/knr/personen/kermit_.jpg" alt="Günther Frieß" /> <figcaption> <img src="images/knr/Mitglieder_2018/2018_KNR-MCV_rgb.png" 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="images/knr/personen/kermit_.jpg" alt="Othmar Morczinczyk" /> <figcaption> <img src="images/knr/Mitglieder_2018/2018_KNR-NCV_rgb.png" 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="images/knr/personen/kermit_.jpg" alt="Werner Schmitt" /> <figcaption> <img src="images/knr/Mitglieder_2018/2018_KNR-MCV_rgb.png" 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="images/knr/personen/kermit_.jpg" alt="Werner Schmitt" /> <figcaption> <img src="images/knr/Mitglieder_2018/2018_KNR-HCV_rgb.png" alt="MCV" /> <h3>Christine Braun</h3> <p>Schriftführerin<br />Kreisnarrenring Obernburg</p><a href="#" class="read-more">Kontakt</a> </figcaption> </figure> HTML-Code:
<img src="images/knr/Mitglieder_2018/2018_KNR-HCV_rgb.png" alt="MCV" />
Hier der Link dazu: Das KNR-Präsidium 2 - Kreisnarrenring Obernburg Nun versuchte ich die ganze Geschichte zu zentrieren und habe es mit diesem div-Tag probiert, was aber nicht zu Erfolg führte: Code:
<div class="center"> Code:
.zentriert { display: flex; flex-wrap: wrap; justify-content: center; } .zentriert h1 { width: 100%; } Siehe hier: Das Präsidium - Kreisnarrenring Obernburg Könnte mir da evtl. jemand weiterhelfen? Mein zweites Problem ist folgendes, ich habe in dem HTML-Code folgendes eingefügt, was vorher nicht drin war (siehe Quellcode oben): HTML-Code:
<img src="images/knr/Mitglieder_2018/2018_KNR-MCV_rgb.png" alt="MCV" />
Leider sieht man es beim mouse over nicht. Es erscheint kurz wenn man mit der Maus wieder heraus fährt. Zu sehen wenn man auf einen meiner Links oben geht. Da ich in CSS noch nicht die große Ahnung habe, wollte ich fragen, ob mir auch hier jemand helfen könnte? Vielen tausend Dank im Voraus! Liebe Grüße Kurt PS: Das Kermit-Foto ist nur ein Platzhalter und stellt nicht die echte Person dar |
Sponsored Links |
Sponsored Links |
|
|||
Das Problem mit dem Zentrieren habe ich jetzt einigermaßen hinbekommen.
Vielen Dank für Deinen Hinweis zu meiner zweiten Frage bezüglich dieses eingefügten HTML-Codes: HTML-Code:
<img src="images/knr/Mitglieder_2018/2018_KNR-MCV_rgb.png" alt="MCV" />
Das Wappen ist durch das Ändernd des Wertes translateX(0%) jetzt zwar sichtbar, aber das Hintergrundfoto (Kermit) fährt nicht mehr nach rechts heraus und bleibt sichtbar. Hier die beiden Versionen: Original: Das Präsidium - Kreisnarrenring Obernburg Änderung des Wertes translateX: Das Präsidium - Kreisnarrenring Obernburg Es sollte eigentlich so wie in der Originalversion sein, dass das Kermit-Foto nach rechts heraus fährt und dann das Wappen mit dem Namen und Kontakt-Button erscheint. Durch die Änderung erscheint zwar das Wappen, aber Kermit bleibt auch erhalten und fährt nicht mehr nach rechts raus. Das Umstellen des Wertes opacity bringt leider auch nichts. LG Kurt Geändert von Kurtus (30.06.2018 um 14:51 Uhr) |
|
||||
Dann ändern wir das doch
https://codepen.io/basti1012/pen/OEdwJB erklärt hatte ich dir das ja ,das du beim hovern alle Bilder verschiebst. Du mußt die Selektoren ändern damit nur das eine Bilder sich verschiebt und nicht alle. Bei deinen Originalen Script hattest du ja nur ein Bild und deswegen wahren die Selektoren da noch richtig ,aber jetzt wo du 2 Bilder hast passt es ja nicht mehr. Ich habe im Script nur 2 kleinigkeiten ändern müßen.Ma kucken ob du sie findest Geändert von basti1012 (02.07.2018 um 19:32 Uhr) |
|
|||
Hmm,
sind das die Änderungen? https://xhtmlforum.de/attachment.php...1&d=1530551626 LG und danke! Kurt |
|
||||
Ja. Die erste änderung sagt das nur das eine Bild zur Seite geschoben wird. Die zweite änderung( die kam komplett dazu ) macht das 2 te Bild( dein wapen) kleiner,damit es da auch rein passt und nicht zu groß ist,sonst würde das Bild so abgeschnitten aussehen
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Ecken abrunden per css | Zombiehunter | CSS | 2 | 15.12.2012 01:03 |
CSS Seite zentrieren? | Carrera | CSS | 9 | 21.12.2011 14:59 |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
Dynamisches CSS per Server? Oder client? Oder wie? | andir | CSS | 4 | 25.11.2010 13:20 |
Zentrieren mit CSS | jensr | CSS | 10 | 27.05.2004 17:21 |