|
|||
Animierte Bildgalerie in Reihe und Mittig
ich habe ein Html-Demo von:
CSS3 Hovereffekt für Bildinfo etwas abgeändert, und sitze viele Stunden an ein Problem. Wie bekomme ich 4-5 Bilder neben einander und denn noch mittig? sobald ich float:left setze sind die zwar neben einander, aber leider nicht mehr mittig und auch NICHT mehr in der grauen Box. Auch display:inline hilft nicht weiter. Geht das wirklich nur mit Tabellen? Code:
<!DOCTYPE html> <html lang="de"> <head> <style> .bild { width: 70%; max-width:500px; min-width:240px; height: auto; overflow:hidden; margin: 2em auto 2em auto; border: 10px solid #fff; position: relative; -webkit-box-shadow: 1px 1px 2px #222; -moz-box-shadow: 1px 1px 2px #222; box-shadow: 0 8px 10px -6px #222; font-family:"Georgia", "Garamond", "Times New Roman", Times, serif; } .bild .infobox { width: 70%; height: auto; position: absolute; bottom: 0; left: 0; margin-left:15%; border:3px solid #fff; border-bottom:none; border-top-right-radius:10px; border-top-left-radius:10px; box-shadow:0 0 9px #fff; background-color: rgba(80,80,80,0.7); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform: translateY(102%); -moz-transform: translateY(102%); -o-transform: translateY(102%); -ms-transform: translateY(102%); transform: translateY(102%); } .bild:hover .infobox { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .bild img { display: block; width:100%; position: relative; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .bild h2 { font-variant:small-caps; text-align: center; position: relative; font-size: 1.2em; padding: 0.2em; margin: 0; background: rgba(0, 0, 0, 0.5); color: #F3F3F3; box-shadow: 0px 1px 3px rgba(255, 255, 255, 0.5); border-top-right-radius:7px; border-top-left-radius:7px; } .bild p { font-style: italic; font-size: 0.8em; position: relative; color: #fff; padding: 0.8em; margin:0; } </style> </head> <body> <div style='background:#eee; border:1px solid #00ff00'> <div class="bild" style='width:100px'> <img src="http://css.fractatulum.net/img_hover_info/herz.jpg" alt="herz"> <div class="infobox"> <h2>Das blaue Herz</h2> <p>Kleiner Text</p> </div> </div> <div class="bild" style='width:100px'> <img src="http://css.fractatulum.net/img_hover_info/herz.jpg" alt="herz"> <div class="infobox"> <h2>Das blaue Herz</h2> <p>Kleiner Text</p> </div> </div> </div> </body> </html> Geändert von seerose (22.10.2015 um 12:04 Uhr) |
Sponsored Links |
|
||||
mit flexbox sollte es gehen
The Ultimate Flexbox Cheat Sheet https://css-tricks.com/snippets/css/a-guide-to-flexbox/ |
Sponsored Links |
|
|||
Super
Vielen Dank etux, so wie du es beschrieben hast funktioniert es super.
Einige hypothetisch Frage: Wenn die 1 Zeile aus 4 Bildern und die 2 Zeile aus 2 Bildern besteht, ist es möglich die 2 Zeile mit nth-child Linksbündig auszurichten? ich werde es aber so mittig lassen. |
|
||||
Es gibt auch „text-align: justify“ (Blocksatz).
Damit auch die letzte Reihe Bilder mit formatiert wird, muss eine „unsichtbare“ letzte Zeile erzeugt werden. Sie muss nicht unbedingt im Quelltext stehen - per CSS (:after) geht es auch. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Schattierungseffekt mittig positionieren | horry5 | CSS | 5 | 19.07.2010 10:08 |
div und Hintergrund mittig? | philippsen | CSS | 3 | 20.02.2010 23:10 |
Flash Gallerie mittig ausrichten | Ashida | CSS | 5 | 15.09.2009 21:11 |
Text mittig neben Bild ausrichten | prm | CSS | 5 | 10.02.2007 10:19 |
ge-float-ete Listeneinträge - Liste mittig darstellen | Hasch | CSS | 3 | 03.11.2006 15:56 |