diedVIPs

html knowhow

Bildanimation mit hover











Bei Mouse drüber Bild anzeigen

Da Ihr Originalbild in der Regel eine andere Größe hat, wie Sie es in der Webseite darstellen wollen, packen Sie es in <div> ... </>
So sieht´s aus
Quellcode
<html>
<head>
Hier nichts
<style type="text/css">
img.pic1 { transition: transform 0.2s; } img.pic1:hover { transform: scale(2.0, 2.0); } </style>
</head>
Äpfel
</body>
</html>


Bildvergrößerung bei hover

Mit dem Befehl "#vier" beschreiben Sie den Rand sowie die runden Ecken des Bildes. da es sinnvoll ist, das Bild in einen <table> einzubinden, können Sie einmal die Größe bestimmen und den Rand zur Umgebung. Da Ihr Originalbild in der Regel eine andere Größe hat, wie Sie es in der Webseite darstellen wollen, packen Sie es in <div> ... </div>.
Quellcode So sieht´s aus
<html>
<style type="text/css">
img.pic1 { transition: transform 0.2s; }
img.pic1:hover { transform: scale(2.0, 2.0); }
</style>
</html>

<body>
<img src="Bilder/HKhlogo.jpg" style="height: auto;" width="40%" alt="Rosenbuquet" class="pic1">
</body>
Rosenbuquet



Bilder in der Größe anpassen

Da Ihr Originalbild in der Regel eine andere Größe hat, wie Sie es in der Webseite darstellen wollen, packen Sie es in <div> ... </>
So sieht´s aus
it dem Befehl "#vier" beschreiben Sie den Rand sowie die runden Ecken des Bildes. da es sinnvoll ist, das Bild in einen <table> einzubinden, können Sie einmal die Größe bestimmen und den Rand zur Umgebung.
Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
#vier {border: 1px solid grey; border-radius: 5px;box-shadow: 5px 5px 5px white inset, 5px 5px 5px black;}
.auto-style84 {background-color: #D5FDA8;}
</style>
</head>

<body>
<table align="right" cellspacing="6" style="width: 30%">
<tr><td><div style="width: 100%; height: auto; background: #ffffff;"><a href="Info.html">
<img id="vier" src="Bilder/Fotos/T-Ratgeber.jpg" style="height: inherit; width: 100%; height: auto; float: right;" alt="Ratgeber" class="auto-style84" /></a></div></td></tr>
</table>

</body>
</html>










Kontakt    Datenschutz    Impressum