HTMLでは、両方の画像が並べて表示されるようにマウスをベース画像にロールオーバーすると、新しい画像をベース画像に配置する方法

Question

私は2つの漫画を持つ漫画のWebページを作っています。私が必要とするのは、ユーザーが漫画の上を動くとき、漫画のダイアログ/マインド思考がページに表示されるはずです

誰かが私を助けますか？

Answer 1

何かこれは何ですか？

img { 
 
    max-width: 100%; 
 
} 
 
.image { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 300px; 
 
} 
 
.image .dialog-image { 
 
    opacity: 0; 
 
    transition: opacity 300ms; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 10px; 
 
    width: 100px; 
 
} 
 
.image:hover .dialog-image { 
 
    opacity: 1; 
 
}

<div class="image"> 
 
    <img src="http://www.jamiesale-cartoonist.com/wp-content/uploads/cartoon-duck-free.png" alt=""> 
 
    <div class="dialog-image"> 
 
    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/23875-200.png" alt=""> 
 
    </div> 
 
</div>

Answer 2

、このCSSを追加し、（元のための「」ダイアログが表示されます。）あなたのダイアログボックスクラスを与える：

.dialog{ 
    position:absolute; 
    z-index:2; 
    display:none; 
} 

.dialog:hover{ 
    display:block; 
} 

position:absolute;を画像の上にダイアログを取得する場合 - あなたはポジショニングを把握に基づきますあなたの周囲のhtml