如何在鼠標懸停時使圖像與鼠標進行交互？

Question

我想做一個網站，我卡在這裏。這是我到目前爲止

body, 
 
html { 
 
    margin: 0; 
 
} 
 

 

 
/*Container*/ 
 

 
.container { 
 
    max-width: 1349px; 
 
    margin: auto 
 
} 
 

 
.hero-image { 
 
    background-image: url(https://www.w3schools.com/css/img_flwr.gif), url("https://www.w3schools.com/howto/photographer.jpg"); 
 
    height: 350px; 
 
    background-position: right bottom, center; 
 
    background-repeat: no-repeat, no-repeat; 
 
    background-size: 160px, cover; 
 
    position: relative; 
 
} 
 

 
.hero-text { 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    color: white; 
 
} 
 

 
.hero-text h1 { 
 
    font-size: 5vw; 
 
} 
 

 
.hero-text button { 
 
    border: none; 
 
    outline: 0; 
 
    display: inline-block; 
 
    padding: 10px 25px; 
 
    color: black; 
 
    background-color: #ddd; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 

 
.hero-text button:hover { 
 
    background-color: #555; 
 
    color: white; 
 
}

<div class="container"> 
 

 
    <div class="hero-image"> 
 
    <div class="hero-text"> 
 
     <h1>I am John Doe</h1> 
 
     <p>And I'm a Photographer</p> 
 
     <button>Hire me</button> 
 
    </div> 
 
    </div> 
 

 
    <p>Page Content..</p> 
 

 
</div>

我希望讓小花圖像鼠標懸停移動發，我希望它與鼠標相同，本網站zooskopje.com.mk與做交互那些在滑塊中彈出的圖像。謝謝。

Answer 1

忘了JavaScript。用CSS做。

https://www.w3schools.com/howto/howto_css_image_overlay.asp

Answer 2

您可以使用

.media-body:hover { 
    animation: move 10s .2s (ease or linear) 1; 
} 

@keyframes move { 
    from { top: 0; left: 0; } 
    to { top: -20px; left: -20px; } 
} 

這是給你一個小提琴：https://jsfiddle.net/9dLd1fav/

這只是一個例子，你將需要調整它來滿足您的需求。 請參閱CSS Animations