Bewegte Bilder in HTML/CSS?
Hey,
Ich habe vor eine Webseite zu schreiben, welche Bilder beinhaltet, welche sich leicht diagonal verschieben wenn man mit der Maus drüber hovered. Wie kann ich das jetzt umsetzten?
LG
Christian
3 Antworten
Bei deinElement:hover kannst du die CSS-Eigenschaft
transform: translate(...px, ...px);
einfügen.
Damit das ganze smooth ist solltest du auch noch eine transition festlegen (die jedoch nicht bei :hover, sondern beim Original).
.myElement {
...
transition: transform 0.3s;
}
.myElement:hover {
transform: translate(15px, 15px);
}
https://jsfiddle.net/buLq1kph/1/
Alternativ kannst du auch margin-top und margin-left vergrößern, wie es Hedhhdgtf macht. Da bin ich aber kein Fan davon, da das alle umliegenden Elemente verschiebt.
Oder du positionierst das Element absolut, wie es dnpdnp macht, und änderst die left- und top-Eigenschaft. Aber auch davon bin ich kein Fan, denn dann wird das Element eben nicht mehr relativ positioniert und wird somit vlt. von anderen Elementen überdeckt. Da musst du, wie auch bei der margin-Methode, halt schauen, ob das in deinem Fall ein Problem wäre. (In einem relativ positionierten Container wäre das aber auch eine Möglichkeit.)
<style>
img:hover{
margin-left: 10px;
margin-top: 10px;
transition-duration: 1s;
/*kannst du bei 10px eig weglassen*/
}
</style>
</head>
<body>
<img src="test.jpg">
</body>
Du nimmst ein Bild, setzt es per HTML auf die Seite, schreibst das CSS, nutzt den Pseudo-Selektor :hover und setzt das CSS hier neu.
Nur ein Beispiel von vielen, je nachdem was du vorhast würd ichs anders umsetzen.
<img src="https://i.picsum.photos/id/883/200/300.jpg?hmac=L62LMsIBfvhnxlTirzshbyv6HarwJvd-tSSBcIvbCVw">
img {
position: absolut;
top: 0;
left: 0;
}
img:hover {
top: 10px
left: 10px;
}