マウスホバーでマウスと画像をやりとりする方法は？

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