Ich möchte ein Bild aufpoppen lassen - wie geht das?

Zitat von blaubär

wie lautet der code dazu?

Was hast du bisher versucht?

Schau mal hier https://answers.squarespace.com/questions/3994…-word-text.html

Zitat von blaubär

Ich habe Google bemüht aber nichts brauchbares gefunden

Veralbern können wir uns alleine!

https://www.google.de/search?q=bild+bei+mouseover+vergrößern

1. Treffer!!!

Das man nicht alles sofort bei Google findet liegt daran das man als Anfänger nicht unbedingt die Begriffe kennt

Zitat von Charmin

Das man nicht alles sofort bei Google findet liegt daran das man als Anfänger nicht unbedingt die Begriffe kennt

Wenn man bei google eingibt

Zitat

bild vergrößern maus

dann schlägt google schon Möglichkeiten vor, da muss man nicht unbedingt die Begriffe kennen.

Ich habe mehrere News-Seiten auf meiner eigenen Webseite, hier habe ich bei den Bildern fast das gleiche gebaut.

Leider sind "fremde Links" nicht gewünscht, und somit möchte ich hier auch meine Seite(n) nicht gerne "bewerben", jedoch kann ich Ihnen gerne den Code mitteilen, mit diesem kann man Bilder vergrößern:

img {
width: 50%;
height: auto;
padding: 3%;
-webkit-transition: ease-in-out 0.9s all !important;
-moz-transition: ease-in-out 0.9s all !important;
-ms-transition: ease-in-out 0.9s all !important;
-o-transition: ease-in-out 0.9s all !important;
transition: ease-in-out 0.9s all !important;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-ms-border-radius: 10px 10px 10px 10px;
-o-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border: 1px dotted #999999; }

img:hover {
-webkit_transform: scale( 1.08, 1.14 );
-moz-transform: scale( 1.08, 1.14 );
-ms-transform: scale( 1.08, 1.14 );
-o-transform: scale( 1.08, 1.14 );
transform: scale( 1.08, 1.14 );
background-color: #999999; }

</style>
<img src="bild.jpg" alt="" />

Wenn fragen sind, gerne her damit, ich bin selbst an CSS interessiert.

Liebe Grüße, Patrick

Zitat von P.Schmidt

Ich habe mehrere News-Seiten auf meiner eigenen Webseite, hier habe ich bei den Bildern fast das gleiche gebaut.

Leider sind "fremde Links" nicht gewünscht, und somit möchte ich hier auch meine Seite(n) nicht gerne "bewerben", jedoch kann ich Ihnen gerne den Code mitteilen, mit diesem kann man Bilder vergrößern:

Hallo Patrik, die Frage von blaubär war nicht, wie vergrößere ich ein Image durch hovern, sondern dass beim Überfahren mit der Maus der Textstelle 'das aktuelle Bild - Blaue Formen' dieses Bild aufpoppt.

Zitat von m.scatello

Veralbern können wir uns alleine!

https://www.google.de/search?q=bild+bei+mouseover+vergrößern

1. Treffer!!!

Und genau diese Lösung hat er nicht gesucht!

Ist aber eine gute Grundlage, um selbst drauf zu kommen. Im Grunde reicht ein kleine Abwandlung:

<a class="hover-image" href="">Ein schöner Bild</a>
<img src="blah/foo/bar.jpg" alt="">

.hover-image + IMG { display:none; }
.hover-image:hover + IMG { display:inline-block; }

Positionierung und Styling lasse ich hier der Übersicht halber mal weg, dürfte aber alles problemlos in CSS funktionieren.

Zitat von Lupus_III

Hallo Patrik, die Frage von blaubär war nicht, wie vergrößere ich ein Image durch hovern, sondern dass beim Überfahren mit der Maus der Textstelle 'das aktuelle Bild - Blaue Formen' dieses Bild aufpoppt.

Vielen dank für deine Info, dann habe ich leider etwa falsches verstanden.

Dann sucht er möglicherweise ein "Tooltipp", mit soetwas habe ich mir eine ganze Bilder-Galerie erstellt, weil ich auf Javascript so gut wie möglich verzichten wollte.

Mit einem sogenannten CSS-"Tooltip" kann er auch Bilder aufpoppen lassen, diese benötigen kein Javascript, und eignen sich hervorragend für solche Projekte.

Ich habe mir auch mehrere Dropdown-Menüs mit solchen "Tooltipps" erstellt....

Gerne nenne ich einen selbsterstellten CSS/Html-Code von einem solchen "Tooltipp", hier ist das Bild schon mit eingebaut und man muss nur noch die URL des Bildes ändern.

LG, Patrick

Edit: Hier mein Code des Tooltip-Fenster:

<style type="text/css">

/* Text, der berührt werden soll */

.tooltip {
   font-size: 14px;
   color: chocolate;
   cursor: help;
   margin: 20px 2% 0px 2%;
   display: inline-block; }

/* Tooltip Fenster */

.tooltip span { 
   width: 50%;
   height: auto;
   position: absolute;
   padding: 10px 10px 10px 10px;
   background-color: #FFFFFF;
   border-radius: 15px 15px 15px 0px;
   box-shadow: 2px 2px 12px 2px #aaaaaa;
   visibility: hidden; }

.tooltip:hover span {
   visibility: visible; }

.tooltip img {
width: 100%; }

</style>
<div class="tooltip">zum Bild<span> zum verlassen des Bildes oder Videos bitte mit der Maus/ dem Finger den Rand au&szlig;en ber&uuml;hren oder Seite neuladen: <img src="Bild.png" alt="Bild-Beschreibung" /></span></div>

Zitat von DanDangerous

Hi,

meine Frage passt nur bedingt hierher...

Falsch, passt überhaupt nicht hier her. Bitte keine Threads kapern, sondern einen neuen Thread eröffnen.

Ich weiß auch ehrlich gesagt nicht, ob die Bilder hier so rein gehören...

srry

Das mit den Bildgrößen sollte dein zweites Problem sein, denn im Code sind derart viele Fehler, dass du Gefahr läufst, dass bei der Darstellung der Seite überhaupt nichts mehr passt... siehe dazu das Validator-Ergebnis:

https://validator.w3.org/nu/?doc=https%…or_haeckel.html

Rein optisch zu erkennen auch an zB dem horizontalen Scrollbalken und im oberen Bereich an der nach rechts herausragenden Linie.

Das Problem mit der Bildgröße sollte sich durch die Formatierung 'background-size: contain;' beheben lassen.