zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Zentrieren von per CSS animierten Bilden

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.06.2018, 14:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2018
Beiträge: 8
Kurtus befindet sich auf einem aufstrebenden Ast
Standard 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;
  }
}
Dies ist der HTML-Code dazu:

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>
Wobei die jeweiligen Zeilen
HTML-Code:
<img src="images/knr/Mitglieder_2018/2018_KNR-HCV_rgb.png" alt="MCV" />
von mir zusätzlich eigefügt wurden. Dazu habe ich am schluss noch eine Frage.

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">
Bei einem ähnlichen Snippet hatte mir jemand mit diesem CSS Codeschnipsel weitergeholfen:

Code:
.zentriert {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.zentriert h1 {
    width: 100%;
}
Das funktioniert aber bei diesem Snippet nicht. Es wird zwar zentriert aber die Fotos liegen vertikal übereinander und sind teilweise außerhalb des Content-Bereichs.
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" />
Diese Bild sollte beim Mouse over oberhalb des Textes erscheinen.

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.06.2018, 12:11
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Das Problem liegt hier
Code:
 100% {
    -webkit-transform: scale(0.8) translateX(150%);
    transform: scale(0.8) translateX(150%);
    opacity: 0.5;
  }
translateX(150%) bewegt das Bild. Ich habe aber wenig Erfahrung mit CSS Animation und kann daher nciht wirklich erklären warum. Vielleicht fällt anderen mehr dazu ein oder du suchst mal nach dem Parameter
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.06.2018, 22:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2018
Beiträge: 8
Kurtus befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank erst Mal.

Wie ich geschrieben hatte bin ich auch absoluter Laie und hoffe dass mir evtl. noch jemand in der Sache helfen kann.

LG
Kurt
Mit Zitat antworten
  #4 (permalink)  
Alt 29.06.2018, 22:30
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Du musst einfach nur aus dem translateX(150%); ein translateX(0%); machen, dann bleibt das Bild da wo es bleiben soll.
Mit Zitat antworten
  #5 (permalink)  
Alt 30.06.2018, 14:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2018
Beiträge: 8
Kurtus befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #6 (permalink)  
Alt 02.07.2018, 19:27
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #7 (permalink)  
Alt 02.07.2018, 20:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2018
Beiträge: 8
Kurtus befindet sich auf einem aufstrebenden Ast
Standard

Hmm,

sind das die Änderungen?

https://xhtmlforum.de/attachment.php...1&d=1530551626

LG und danke!
Kurt
Angehängte Grafiken
Dateityp: jpg snippet-aenderung.JPG (109,1 KB, 7x aufgerufen)
Mit Zitat antworten
  #8 (permalink)  
Alt 02.07.2018, 21:29
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:05 Uhr.