Per HTML Bilder sklaieren und per klick groß anzeigen?

[tintenkiller]

Hallo,

gibt es ein einfaches HTML-Attribut, mit dem sich Bilder per Mausklick in ihrer ursprünglichen Originalgröße anzeigen lassen?

Also ich habe z.B. ein Bild mit 1000 x 1000 px und das habe per HTML auf 50 % skaliert. Was ich nur noch bräuchte, wäre ein Befehl, der das Bild per Mausclick oder Mousover in der Originalgröße von 1000 x 1000 px anzeigt, gibt es so etwas?

LG

 

[scbawik]

Hallo,

gibt es ein einfaches HTML-Attribut, mit dem sich Bilder per Mausklick in ihrer ursprünglichen Originalgröße anzeigen lassen?

Also ich habe z.B. ein Bild mit 1000 x 1000 px und das habe per HTML auf 50 % skaliert. Was ich nur noch bräuchte, wäre ein Befehl, der das Bild per Mausclick oder Mousover in der Originalgröße von 1000 x 1000 px anzeigt, gibt es so etwas?

LG

Mit CSS

img {
  width:500px;
  height:500px;
}
img:hover {
  width:1000px;
  height:1000px;
}

 

[tintenkiller]

Danke!

 

[tintenkiller]

Hallo,

ich hätte noch eine kurze Nachfrage:

Ich möchte gerne, dass eines der Bilder von der CSS Definition ausgenommen ist. Wie könnte man dieses eine Bild entsprechend markieren, so dass dieses als einziges nicht skaliert wird?

LG

 

[djheke]

img:hover {
width:400px;
}

img.no {
width:100px; /* keine Änderung */
}

<img class="no" src="bild.jpg" alt="Bild" title="Bild">

 

[tintenkiller]

Danke, hat geklappt!

 

[tintenkiller]

Ich habe noch ein Problem: Das Hover wird auch in der folgenden CSS Klasse "colum" auf die darin befindlichen Bilder angewendet. Wie kann man das verhindern.

<div class="column">
<img class="custom style" src="/images/500px.jpg" alt="500px" width="100%" height="auto">
<img class="custom style" src="/images/behance.jpg" alt="500px" width="100%" height="auto">
<img class="custom style" src="/images/behance.jpg" alt="500px" width="100%" height="auto">
</div>

 

[threadi]

Gibt den anderen Bildern eine Klasse oder überschreib die Eigenschaften für die Klasse .column z.B. per

.column img:hover { width: auto; }