Da hast du Recht, aber mein ursprüngliches Anliegen war, ein Bild, das nur zu 25% aus dem rechten Browserrand hervorschaut, bei <hover> komplett zu zeigen.
So sieht das Ganze aus: https://www.hautnah-petershagen.de
Beste Grüße Hans
Beiträge von HerrL
-
-
Hallo,
ich konnte mein Problem mit transition und transform lösen.
<style>
#flyout {
height: 90px;
width: 230px;
top: 200px;
right: 0px;
position: absolute;
z-index: 100;
overflow: hidden;
}
.image2 {
margin-left: 170px;
transition: transform 0.7s;
}
.image2:hover {
transform: translate(-170px, 0px);
}
</style>
<div id="flyout">
<img src="flyout.png"/>
</div>
Trotzdem Danke!
-
Danke für die schnelle Antwort. So funktioniert es, aber der Bildwechsel soll erst bei "onklick" oder "hover" stattfinden.
Für eine Antwort wäre ich wieder dankbar!
-
Hallo, ich möchte gerne am rechten Browserrand eine Fly-out-Box mit simplem Bildwechsel realisieren. Ich habe folgenden Code über <Quellcode> eingegeben. Die CSS-Angaben für die Fly-out-Box werden korrekt übernommen. Der Javascript-Teil aber nicht wirklich. Der Bildwechsel funktioniert nicht. Die Links zu den Bildern habe ich natürlich angepasst.
Für eine Antwort wäre ich dankbar.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<Style>
#fly-out {
height: 90px;
width: 230px;
top: 200px;
right: 0px;
position: absolute;
z-index: 100;
}
</Style>
<script type="text/javascript">
<!--
function change_img(img_name, img_src) {
document[img_name].src = img_src;
}
-->
</script>
</head>
<body>
<div id="fly-out">
<img name="image" src="Fly_out_1.png" onmouseover="change_img('image', 'Fly_out_2.png')" onmouseout="change_img('image', 'Fly_out_1.png')" />
</div>
</body>
</html>