Bilder mit Hover-Effekt nebeneinander nicht untereinander erstellen

Andrea123

Liebes Forum,

ich bin derzeit erst dabei mich mit CSS und HTML anzufreunden und bin daher über Hilfe jeder Art dankbar :-)
Für meine Seite mit dem Onetone Theme möchte ich Bilder mit einem Hover Effekt erzeugen.
Das mit dem Effekt habe ich hinbekommen, nur leider erscheinen die Bilder immer untereinander. Ich möchte allerdings fünf Bilder nebeneinander haben, in etwa so wie unter "Die Besetzung": http://www.boppinb.de/
Meine Seite ist leider noch nicht online, daher kann ich den Link noch nicht posten.
Ich habe folgenden Code eingebunden mit dem Hover Effekt:

<div class="col-sm-6">
<div class="row"

<div class="ih-item square effect3 bottom_to_top"><a href="#">
<div class="img"><img src="http://bild1" alt="img">﷐</div>
<div class="info">
<h3>NAME</h3>
<p>INFOS</p>
</div></a></div>

Das funktioniert auch einwandfrei. Aber wie ordne ich mehrere Bilder (5 Stück) nebeneinander an?
Ich habe es schon mit align:center oder float probiert. Leider weiß ich nicht so recht wo ich das einsetzen soll...

Wäre toll, wenn jemand einen Rat hat!
Vielen Dank!!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SirEctor

Das geht gewöhnlich mit float:left. Die Bilder dürfen natürlich nur 1/5 der gesamten Breite inkl. margin und padding haben.

maxe

Schlecht so ohne Link zum Blog.
Also eher allgemein gehalten ... mit float:left kannst du mehrere Bilder nebeneinander anordnen.

Andrea123

Danke für die schnelle Antwort!
Die Seite ist leider noch nicht online und ich baue auch für Freunde und nicht für mich. Daher kann ich leider noch keinen Link freigeben.
Schon mal vielen Dank für die Hilfe!
Und wo gebe ich das mit float:left in dem Codebeispiel?

Im Editor ist das hinterlegt:
.alignleft {
float: left;
margin: 5px 20px 20px 0;

Nur wo gebe ich das in der CSS an? Vor dem Hover Effekt oder dazwischen irgendwo?

helix

Zitat von Andrea123

Nur wo gebe ich das in der CSS an? Vor dem Hover Effekt oder dazwischen irgendwo?

Das ist dem css egal, solange du die Klasse .alignleft nicht später im css durch eine andere Anweisung überschreibst.

Deine Frage sollte eher sein, welches Element diese Klasse kriegen soll. => Zumindest mal das div, in das du das Bild gepackt hast. Aber für mich ist – so ohne konkrete Anschauung – nicht nachvollziehbar, wie deine Elemente überhaupt angeordnet sein sollen, so mit Name als h3-Überschrift und Infos in einem p-Tag …

Wenn du noch weitere Hilfe dabei benötigst, mach bitte wenigstens mal einen Screenshot, wie es jetzt aussieht, damit nachvollziehbar wird, was eigentlich alles miteinander umgruppiert werden soll. Danke.

Gruß
helix

Andrea123

Vielen Dank für eure Hilfe und tut mir Leid, dass es bei mir mit einer Antwort etwas länger gedauert hat.

Also das mit dem float:left funktioniert leider nicht so richtig, wobei ich glaube, dass ich es einfach an einer falschen Stelle in meinem Editor eintrage.
Helix, zu deiner Frage mit h3 und dem p-tag. Das bezieht sich nur auf den Hover-Effekt, der erscheint, sobald ich mit der Maus über das Bild fahre.
Dann klappt sich eine kleine Box hoch mit den Informationen, die unter H3 und dem p-tag hinterlegt sind.

Der Effekt an sich funktioniert auch. Ich möchte die Bilder nur gerne nebeneinander anordnen und nicht untereinander.

Grüße!

Andrea123

So sieht es aktuell aus...Ich hätte es gerne nebeneinander in einer Reihe! Natürlich mit unterschiedlichen Bildern ;-)

helix

Aus dem Pixelbild kann ich natürlich immer noch nicht sehen, wie du die Bilder „verpackt“ hast. Aber strukturell müsste es so ähnlich wie dieses hier sein:

HTML

<div>
    <img src="" />
    <h3>h3-Überschrift, die hovert</h3>
    <p>Weiterer Text, der hovert</p>
</div>
<div>
    <img src="" />
    <h3>h3-Überschrift, die hovert</h3>
    <p>Weiterer Text, der hovert</p>
</div>
etc.

Alles anzeigen

Dann gibst du jedem dieser bildumschließenden („paketumschließenden“) divs im HTML die Klasse .alignleft:

HTML

<div class="alignleft">

Und die Definition / Styleanweisung für die Klasse .alignleft kopierst du in deine style.css

Code

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

Wenn es dann nicht funktioniert, ist der wahrscheinlichste Fehler der, dass du die Klasse .alignleft einem anderen Element geben musst – wie gesagt, das ist so im Trockenschwimmmodus ein bisschen schwierig zu bestimmen.

Gruß
helix

maxe

Es bleibt also dabei:

Zitat von maxe

Schlecht so ohne Link zum Blog.

Moralapostel

Anhand deines HTML codes sehe ich das du mit Bootstrap arbeitest, richtig?
Wenn ja, musst du div' s natürlich auch richtig handhaben.

<div class="col-sm-6"></div> heißt nichts weiter als das zwei Spalten nebeneinander nebeneinander passen.

Die Anzahl fünf ist mit Bootstrap nicht möglich da es sich um ein 12 spaltiges Layout handelt
Ergo

Mit dieser Variante hasst du 4 Bilder nebeneinander
<div class="row">
<div class=" col-sm-3">Bild + Hover-Klasse</div>
<div class=" col-sm-3">Bild + Hover-Klasse</div>
<div class=" col-sm-3">Bild + Hover-Klasse</div>
<div class=" col-sm-3">Bild + Hover-Klasse</div>
<div class=" col-sm-3">Bild + Hover-Klasse</div>
</div>

Andrea123

Vielen vielen Dank für all die Hilfe...
Nach etwas rumbasteln hat es nun funktioniert, auch wenn ich das mit dem Hover-Effekt einfach etwas anders angehen musste.
Wie ich es nun genau gemacht habe, kann ich euch gar nicht sagen. Ich habe so viel ausprobiert, bis es ging :-)
Aber der letzte Hinweis war der entscheidende! Die Wartungsarbeiten sind nun auch fast abgeschlossen, dann wird es mit Link zur Seite wohl einfacher...

Danke...Das nächste Problem wartet bestimmt schon auf eure Expertise :-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bilder mit Hover-Effekt nebeneinander nicht untereinander erstellen

Jetzt mitmachen!