Frage von Unbek4nt, 40

HTML: Nach Mousover Position des Bildes ändern?

Hallo zusammen,

stehe momentan vor folgendem Problem: Ich muss ein Bild auf eine Website programmieren, sodass wenn man mit der Maus auf dem Bild ist, dieses nach oben geht und dort drunter ein Text erscheint.

Leider habe ich keine Ahnung wie das funktionieren soll, weil sich das Bild einfach nicht nach oben bewegt und ich nicht weiß, wie ich den Text darunter ausgeben soll.

Das ganze kann ich leider nur in HTML einbinden, da ich es später auf einer Wordpress-Seite verwenden möchte und das dort nur über ein Element per HTML eingebunden werden kann.

Kann mir da jemand weiterhelfen?

Mit freundlichen Grüßen, Unbek4nt

Antwort
von Darc007, 17

Machs mit CSS

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .element-container{
position: absolute;
width: 200px;
height: 150px;
}
.element-container>img{
position: absolute;
top:0;
width: 100%;
height: 100%;
transition: all 0.3s ease-in-out;
}
.element-container>img:hover{
top: -50px;
}
.image-text{
position: absolute;
bottom: 0;
z-index: -100;
} </style> </head> <body> <div class="element-container"> <img src="image.png" /> <div class="image-text"> Lorem Ipsum </div> </div> </body> </html>

Hab ich getestet, funktioniert so.

Kommentar von Unbek4nt ,

Vielen danke, einen ganzen Code habe ich gar nicht erwartet! :)

Kommentar von Unbek4nt ,

Edit: leider doch nicht, bei mir wird unter dem Bild kein Text angezeigt. :/

Kommentar von Unbek4nt ,

* nur bei Wordpress wird kein Text darunter gezeigt.

Kommentar von Darc007 ,

Versuchst du es bei WordPress in ein Template einzubauen oder nur in einen Post?
Wenn du's in ein Template einbauen willst kann es sein, dass der Text gar nicht erst eingefügt wird.

Antwort
von ilovetoro,

Mit "position absolute" und solchen Geschichten wird es damit unendliche Probleme geben.
Wenn dein Website responsive sein soll, musst du dir auch überlegen wie groß das Bild sein soll (maximal) und wie es sich verhalten soll wenn der Browser schmäler wird.

Hier mal ein Beispiel  https://jsfiddle.net/t8ev4ghd/  ... ist jetz nicht responsive, aber kannst ja noch media-queries dazu setzen.

Antwort
von TanteHolger, 19

Ohne Javascript geht da nichts. Ich kann da jQuery empfehlen. Schau mal hier. https://api.jquery.com/hover/

Kommentar von Unbek4nt ,

Ist das kompliziert sich mit jQuery auseinander zu setzen nur für diese Effekt oder ist das "schnell" gemacht?

Kommentar von TanteHolger ,

Etwas schnell zu machen ist nicht so mein Ding. Gutes braucht Zeit und Geduld. Du musst ja auch verstehen wie etwas funktioniert, denn ohne Verständnis für die Sache kommen nur neue Fragen und später Frustration auf. Als Könner geht das sehr schnell, als Laie braucht es seine Zeit. jQuery ist sogar einfacher als es regulär mit normalem JS zu machen, daher empfehle ich es Anfängern und Leuten die etwas unkompliziertes möchten =)

Keine passende Antwort gefunden?

Fragen Sie die Community