Div-da div-ga o'tish

Men hover ustiga div ni ko'rsatishni xohlayman. Men juda ko'p harakat qildim, ammo muammoimni hal qila olmadim. div ustida suzib yurganimda, img_overlay paydo bo'ladi, lekin hover vaqtida yuqoriga ko'tariladi.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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">
    
    <div class="img_overlay">
      
Change


Delete

</div> </div>
</div> </div>

Any help would be great.

Thank You.

2
Siz harakatlanishni to'xtatishni istaysizmi?
qo'shib qo'ydi muallif amflare, manba
Hover ustida "yuqoriga ko'tarilgan" degani nimani anglatadi?
qo'shib qo'ydi muallif Slime, manba
Muammo nima sababli emas, lekin divs dan biri yopiq emas.
qo'shib qo'ydi muallif Slime, manba
Muammo nima sababli emas, lekin divs dan biri yopiq emas.
qo'shib qo'ydi muallif Slime, manba
Img tagida class = "img_overlay" ni qo'yishni harakat qilib ko'ring. cl.jroo.me/z3/q/R/R/d/… ; class =" img_overlay ">
qo'shib qo'ydi muallif mlegg, manba
Img tagida class = "img_overlay" ni qo'yishni harakat qilib ko'ring. cl.jroo.me/z3/q/R/R/d/… ; class =" img_overlay ">
qo'shib qo'ydi muallif mlegg, manba
men uni aylanib chiqsam, div aylana boshlaydi ... yuqoriga ko'tariladi. ish kodimni tekshirishingiz mumkin.
qo'shib qo'ydi muallif user7030651, manba
men uni aylanib chiqsam, div aylana boshlaydi ... yuqoriga ko'tariladi. ish kodimni tekshirishingiz mumkin.
qo'shib qo'ydi muallif user7030651, manba
@mlegg .. img_overlayda ba'zi matnlar mavjud, shuning uchun men qila olmayman
qo'shib qo'ydi muallif user7030651, manba
@amflare .. ha aniq .. bu men istayman .. Men faqat istayman .. image_div ustida hove so'ng img_overlay div har qanday harakati paydo bo'ladi
qo'shib qo'ydi muallif user7030651, manba

13 javoblar

Üstbilgida holati: relative va position: absolute qo'shib qo'ying

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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">
    
    <div class="img_overlay">
      
Change


Delete

</div> </div> </div>
</div> </div>
2
qo'shib qo'ydi

Üstbilgida holati: relative va position: absolute qo'shib qo'ying

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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">
    
    <div class="img_overlay">
      
Change


Delete

</div> </div> </div>
</div> </div>
2
qo'shib qo'ydi

Buni qilishning eng yaxshi usuli emas, lekin tezda tuzatishni o'zgartirish kerak bo'lsa

.main_image_div .image_div {
    position: relative;
}

.main_image_div .image_div .img_overlay {
    top: -16px;
    position: absolute;
}
0
qo'shib qo'ydi

Buni qilishning eng yaxshi usuli emas, lekin tezda tuzatishni o'zgartirish kerak bo'lsa

.main_image_div .image_div {
    position: relative;
}

.main_image_div .image_div .img_overlay {
    top: -16px;
    position: absolute;
}
0
qo'shib qo'ydi

Buni qilishning eng yaxshi usuli emas, lekin tezda tuzatishni o'zgartirish kerak bo'lsa

.main_image_div .image_div {
    position: relative;
}

.main_image_div .image_div .img_overlay {
    top: -16px;
    position: absolute;
}
0
qo'shib qo'ydi

100% 100px balandlikda uchun kerak bo'lgan yagona o'zgarish bo'lsa, har kim o'z takliflari bilan tashqariga chiqadi ...

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

Va buni amalga oshirib, sizda hech qanday kulrang quti yo'q.

0
qo'shib qo'ydi

100% 100px balandlikda uchun kerak bo'lgan yagona o'zgarish bo'lsa, har kim o'z takliflari bilan tashqariga chiqadi ...

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

Va buni amalga oshirib, sizda hech qanday kulrang quti yo'q.

0
qo'shib qo'ydi

Mana, ish kodi. Buni biroz ko'proq uslubga muhtojligini tushunaman. holati: mutlaq va holati: relative dan foydalanaman. Sichqoncha divning 100 foizini qamrab oladi. Bu siz xohlaganmi?

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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">
                                                                                <div class="image_div">
                                                                                        
                                                                                        <div class="img_overlay">
                                                                                                
Change


Delete

</div> </div>
</div> </div>
0
qo'shib qo'ydi

Mana, ish kodi. Buni biroz ko'proq uslubga muhtojligini tushunaman. holati: mutlaq va holati: relative dan foydalanaman. Sichqoncha divning 100 foizini qamrab oladi. Bu siz xohlaganmi?

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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">
                                                                                <div class="image_div">
                                                                                        
                                                                                        <div class="img_overlay">
                                                                                                
Change


Delete

</div> </div>
</div> </div>
0
qo'shib qo'ydi

Buni ko'ring:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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">
    
    
    <div class="img_overlay">
                  
Change


Delete

</div> </div> </div>
</div> </div>
0
qo'shib qo'ydi

Buni ko'ring:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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">
    
    
    <div class="img_overlay">
                  
Change


Delete

</div> </div> </div>
</div> </div>
0
qo'shib qo'ydi

Buni ko'ring:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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">
    
    
    <div class="img_overlay">
                  
Change


Delete

</div> </div> </div>
</div> </div>
0
qo'shib qo'ydi

Buni ko'ring:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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">
    
    
    <div class="img_overlay">
                  
Change


Delete

</div> </div> </div>
</div> </div>
0
qo'shib qo'ydi