divにホバーを表示する

Question

ホバーにdivと表示したいと思います。私はたくさん試しましたが、私の問題を解決できませんでした。 divにカーソルを合わせると、img_overlayが表示されますが、ホバーすると上になります。

.main_image_div { 
 
    margin: 0 auto; 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.main_image_div .image_div { 
 
    margin: auto; 
 
} 
 

 
.main_image_div .image_div img { 
 
    width: 100%; 
 
} 
 

 
.main_image_div .image_div .img_overlay { 
 
    top: -100px; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    display: none; 
 
    position: relative; 
 
    background: rgba(0, 0, 0, 0.3); 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.main_image_div .image_div .img_overlay p { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 25px; 
 
    color: #FFFFFF; 
 
    font-size: 14px; 
 
} 
 

 
.main_image_div .image_div .img_overlay p+p { 
 
    top: 50px; 
 
} 
 

 
.main_image_div:hover .img_overlay { 
 
    display: block; 
 
}

<div class="main_image_div b"> 
 
    <div class="image_div"> 
 
    <img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg"> 
 
    <div class="img_overlay"> 
 
     <p>Change</p> 
 
     <p>Delete</p> 
 
    </div> 
 
    </div>

すべてのヘルプは素晴らしいことです。

ありがとうございます。

Answer 1

は、ここで作業コードがあるオーバーレイ

.main_image_div { 
 
    margin: 0 auto; 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 

 
.main_image_div .image_div { 
 
    margin: auto; 
 
} 
 

 
.main_image_div .image_div img { 
 
    width: 100%; 
 
} 
 

 
.main_image_div .image_div .img_overlay { 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    display: none; 
 
    position: absolute; 
 
    background: rgba(0, 0, 0, 0.3); 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.main_image_div .image_div .img_overlay p { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 25px; 
 
    color: #FFFFFF; 
 
    font-size: 14px; 
 
} 
 

 
.main_image_div .image_div .img_overlay p+p { 
 
    top: 50px; 
 
} 
 

 
.main_image_div:hover .img_overlay { 
 
    display: block; 
 
}

<div class="main_image_div b"> 
 
    <div class="image_div"> 
 
    <img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg"> 
 
    <div class="img_overlay"> 
 
     <p>Change</p> 
 
     <p>Delete</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

上の親要素とposition:absoluteにposition:relativeを追加します。私はそれがいくつかのより多くのスタイリングを必要と理解します。私はposition:absoluteとposition:relativeを使用します。ホバーはdivの100％をカバーします。これはあなたが望んだものですか？

.main_image_div { 
 
    margin: 0 auto; 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.main_image_div .image_div { 
 
    margin: auto; 
 
    position: relative; 
 
} 
 
.main_image_div .image_div img { 
 
    width: 100%; 
 
} 
 
.main_image_div .image_div .img_overlay { 
 
    display: none; 
 
    top: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    background: rgba(0, 0, 0, 0.3); 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.main_image_div .image_div .img_overlay p { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 25px; 
 
    color: #FFFFFF; 
 
    font-size: 14px; 
 
} 
 
.main_image_div .image_div .img_overlay p + p { 
 
    top: 50px; 
 
} 
 
.main_image_div:hover .img_overlay { 
 
    display: block; 
 
}

<div class="main_image_div b"> 
 
\t \t \t \t \t \t \t \t \t \t <div class="image_div"> 
 
\t \t \t \t \t \t \t \t \t \t \t <img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" > 
 
\t \t \t \t \t \t \t \t \t \t \t <div class="img_overlay"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <p>Change</p> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <p>Delete</p> 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t </div>

Answer 3

あなたが作る必要がある唯一の変更は、height ...

.main_image_div .image_div .img_overlay { 
    height:100%; 
} 

そして、これを実行して、上100px100%にあるとき、誰もが彼らの提案で船外に起こっています、灰色のボックスが飛び出すことはありません。

Answer 4

それはそれを行うための最善の方法はありませんが、あなたはクイックフィックスの変更が必要な場合は、次の

.main_image_div .image_div { 
    position: relative; 
} 

.main_image_div .image_div .img_overlay { 
    top: -16px; 
    position: absolute; 
} 

Answer 5

は、このお試しください： "

.main_image_div { 
 
    margin: 0 auto; 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.main_image_div .image_div { 
 
    margin: auto; 
 
} 
 

 
.main_image_div .image_div img { 
 
    width: 100%; 
 
} 
 

 
.image_div { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.img_overlay { 
 
    position: absolute; 
 
    height: 100%; 
 
    top: 100%; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(0, 0, 0, 0.3); 
 
    transition: all 0.3s ease; 
 
    color: #ffffff; 
 
    padding: 0; 
 
} 
 

 
.main_image_div:hover .img_overlay { 
 
    top: 0; 
 
    padding: 5px; 
 
}

<div class="main_image_div b"> 
 
    
 
    <div class="image_div"> 
 
    <img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" > 
 
    
 
    <div class="img_overlay"> 
 
\t \t <p>Change</p> 
 
     <p>Delete</p> 
 
    </div> 
 
    
 
    </div> 
 

 
</div>