diedVIPs

html knowhow

Tipps rund um Hoverefekte










Bild wirft Schatten bei hover

Mit dem Befehl
So sieht´s aus

Quellcode
Download Button   Laden Sie die .html-Datei runter



Ausfahrbare Bildergalerie

Irgenwas
So sieht´s aus
Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
#blumenGarten {width: 200%; height: 250px; background: url("Bilder/Slide/Dahlien.jpg") center left 0px, url("Bilder/Slide/Erdbeeren.jpg") center left 0px,
url("Bilder/Slide/Fresien.jpg") center left 0px, url("Bilder/Slide/Malven.jpg") center left 0px; background-repeat: no-repeat;}
#blumenGarten:hover { animation: bewegeBlumen 10s; animation-fill-mode: backwards;}
</style>
</head>

<body>
<div style="position:absolute; height: 9em; width: 28em" class="auto-style1" id="blumenGarten"></div>

</body>
</html>




Bild wirft Schatten bei hover

Mit dem Befehl
So sieht´s aus

Quellcode
Download Button   Laden Sie die .html-Datei runter



Bild wirft Schatten bei hover

Mit dem Befehl
So sieht´s aus

Quellcode
Download Button   Laden Sie die .html-Datei runter



Bild wirft Schatten bei hover

Mit dem Befehl
So sieht´s aus

Quellcode
Download Button   Laden Sie die .html-Datei runter



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>.



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>
</body>
</html>



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>
</body>
</html>



Bildervergrößern mit automatischem Ende

Mit dem Befehl "#vier" bes
So sieht´s aus


Quellcode



Bilderlupe

Mit dem Befehl
So sieht´s aus





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;}
</style>
</head>

<body>
<img id="vier" src="../Bilder/Life.jpg" style="height: inherit; width: 100%; height: auto; float: right;" alt="Life" /></a></div></td></tr>
</table>

</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