Hallo,
ich habe mir von der Seite http://littlesnippets.net wieder mal ein Schnipsel geholt und möchte ihn bei mir auf der Seite einbinden.
Der CSS Code sieht wie folgt aus:
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;
}
}
Alles anzeigen
Der HTML-Code so:
<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>
Alles anzeigen
Hier der Link dazu
http://uebung.mcv-moemlingen.n…-uns/das-knr-praesidium-2
Nun versuchte ich die ganze Geschichte zu zentrieren und habe es mit diesem div-Tag probiert, was aber nicht zu Erfolg führte:
Bei einem ähnlichen Snippet hatte mir anka in diesem Beitrag Zentrieren mit diesem CSS Codeschnipsel weitergeholfen:
.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:
http://uebung.mcv-moemlingen.net/wir-ueber-uns/das-praesidium
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 (sieh Quellcode oben)
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 immer nicht 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