Onclick auf ein Wort um ein Bild einzublenden

[Sailor]

Nun ja, was ich da jetzt auf der Online-Seite sehe, ist aber nicht das, was du haben wolltest... da fehlt der gesamte CSS Teil, der die Bilder formatiert und einblendet beim hovern .... Absicht?

 

[Eureka]

@Sailor: Vielen Dank für den Tip.

Hmm... Gestern erschienen die eingeblendeten Bilder zu klein auf's Handy.
Daraufhin hatte ich sie vergrößert und nicht mehr auf den Monitor kontrolliert.
Nee... dort sind sie definitiv zu groß und werden außerdem unten verstümmelt.

Ich habe jetzt "max.width auf 15%" gestellt: die Bilder werden zwar gut auf dem PC-Monitor abgebildet und nicht mehr abgeschnitten aber sie erscheinen arg klein auf dem Handy.

Da ich denke, dass die meisten die Homepage vom Handy aus abrufen werden, sollte dort die bessere Abbildung sein.

Wenn die Bilder aber größer wären, sollten sie höher erscheinen um nicht unten abgeschnitten zu werden.
Wie könnte ich das bewerkstelligen?

 

[Sailor]

Dafür gibt es im CSS MediaQueries, mit denen kann man für unterschiedliche Bildschirmgrößen unterschiedliche Formatierungen festlegen.
https://www.mediaevent.de/css/media-queries.html
In deinem Fall würde so etwas helfen...

@media screen and (max-width: 1024px) {
  div.show_titel img.show_bild {
    max-width: 20%;
  }
}
@media screen and (max-width: 800px) {
  div.show_titel img.show_bild {
    max-width: 35%;
  }
}
@media screen and (max-width: 600px) {
  div.show_titel img.show_bild {
    max-width: 40%;
  }
}

Für große Bildschirme (Breite größer als 1024px) gilt dann das CSS, was du jetzt schon in deinem Stylesheet hast.
Wird die Breite dann kleiner und unterschreitet den Wert, der in der @media als 'max-width' angegeben ist, wird das CSS der @media angewendet
Mit den Werten kannst du dann beliebig experimentieren... was eben am besten passt die Bildschirme (PC / Tablet / Handy)
... ach ja... du hast als 'border-radius' in deinem CSS 100px angegeben... dadurch werden die Bilder teilweise eiförmig. Sieht nicht so gut aus! mache mal statt 100px lieber 50% - dann ist das immer ein perfekter Kreis.

 

[Eureka]

@Sailor: Wow... jetzt sieht es echt supi aus!

Vielen Dank lieber Sailor, Du warst mir eine wirklich große Hilfe.
Ich wünsche Dir schöne und geruhsame Festtage!

 

[Sailor]

Ich wünsche Dir schöne und geruhsame Festtage!

Danke ... ebenso!

 

[Sailor]

... ein winziger Nachtrag.
Füge bitte zu dem CSS für div.show_titel img.show_bild noch einen zusätzlichen Punkt hinzu!

z-index: 1;

Damit verhinderst du, dass bei größeren Bildschirmen das untere Bild 'unter' den 'footer' rutscht und dadurch unten etwas abgeschnitten wird.

 

[Eureka]

@Sailor: Vielen Dank diesmal noch einmal und insgesamt für Deine Hilfe. Unsere kleine Gruppe ist ganz begeistert.

 

[Sailor]

Hmmm... da fehlt das Semikolon zwischen dem 'padding: 0px'' und dem 'z-index: 1;' ... .
Und dann mal viel Erfolg mit eurem neuen Stück...ach ja... und frohe Weihnachten!