Bildwechsel bei Mouseover

sabbel2002

Hallo Leute,

ich möchte eine Zeile mit 10 Bildern machen, bei dem jedes Bild beim berühren mit der Mouse von weiß ( wegen dem Design ) in das Original welchelt.

Dazu habe ich das im Netz gedunden: Das Problem ist dass die Breite fest angegeben ist.
Bei mobiler Ansicht sind die Bilder dann abgeschnitten.
Hat jemand eine Idee wie man das anders umsetzen kann?

Code

.bildwechsel { width:200px; height:50px; background:url("bildweiß.jpg"); }
.bildwechsel:hover { background:url("bildbunt.jpg"); }
.text_100 {width: 100%}
.one_ten {width: 10%}

Code

<div class="text_100">
<div class="one_ten">
<div class="bildwechsel">
</div>
</div>
<div class="one_ten">
<div class="bildwechsel2">
</div>
</div>
.....
</div>

Alles anzeigen

Liebe Grüße Sabbel

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

Sailor56

Das sieht schon im Ansatz verkehrt aus!
Du hast .bildwechsel mit einer festen Breite von 200px in ein .one_ten mit einer Breite von 10% hineingepackt.
Du sagts .. 10 Bilder in einer Reihe(?).. das wären mindestens 2000px Platzbedarf. Sobald die Displaybreite kleiner als 2000px wird, kommt das zu Konflikten - das passt einfach nicht.
Versuche mal deine Klasse .bildwechsel so zu formatieren.

HTML

.bildwechsel { width:100%; background:url("bildweiß.jpg"); }

sabbel2002

Sobald ich 100% Breite angebe wird kein Bild angezeigt.

Sailor56

Dann einen Link zur Seite bitte - mit Glaskugel und Rätselraten kommen wir sonst nicht weiter!

Sailor56

Ich seh gerade... ich bin da etwas auf dem Holzweg! Es sind ja Hintergrundbilder...
Also Kommando zurück... neuer Versuch.

Code

.bildwechsel { width:100%; height: 10vw; background:url("bildweiß.jpg"); background-size: contain; }

mit der height- Angabe kannst du etwas spielen, um die Proportionen der Bilder passender einzustellen.

sabbel2002

Hallo .. vielen Dank.
So sind die Bilder auch abgeschnitten.
Ich kann die Bilder für die Hauptseite anpassen. Aber bei einer mobilen Ansicht passt es dann wieder nicht

Hier der Link der Seite
http://kaffee-doktor-bitburg.de/test/

Sailor56

Ergänze bitte folgendes in deinem CSS.

HTML

.Bild1, .Bild2 {
  background-position: center center;
  background-repeat: no-repeat;
}

Und wenn dann immer noch die Bilder abgeschnitten werden, poste bitte einen Screenshot, damit wir sehen können, was du unter abgeschnitten verstehst.
Bei mir sieht das jetzt bei eine Breite von 320px so aus:

SEpp55

Falls du das unten gezeigte Abschneiden meinst

füge in die style Anweisungen bei Bild1 und Bild2 (je2x) "background-repeat: no-repeat;" ein.

sabbel2002

Es funktioniert wunderbar.
Danke für eure Unterstützung <3

LG
Sabbel

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bildwechsel bei Mouseover

Jetzt mitmachen!