Başka bir div üzerinde bir div yerleştirin

Question

Başka bir divun içinde iki div var (#video-wrapper).

html:

<div class="row"> 
    <div class="video-wrapper col-lg-2"> 
     <div class="video-thumbnail"> 
      <img src="img/img.jpg"> 
      <span class="glyphicon glyphicon-play video-play"></span> 
      <span class="glyphicon glyphicon-info-sign video-info"></span> 
     </div> 
     <div class="video-description"> 
      <p class="title">See and Sea...</p> 
      <div class="video-upload-info"> 
       <p class="by">Franschisil</p> 
       <p class="pubdate">4 days ago</p> 
      </div> 
     </div> 
    </div> 
</div> 

css: Artık

.video-wrapper { 
} 

.video-thumbnail { 
    position: relative; 
    height: 110px; 
    box-shadow: 0px 0px 10px 0px; 
} 

.video-description { 
    height: 100px; 
    background-color: white; 
    padding: 5px; 
    word-wrap: break-word; 
    opacity: 0.9; 
} 

o şuna benzer:

Ne elde etmek istiyorum #video-description gizlemek ve diplayolduğunda #video-thumbnail'un üstündetıklandı. Bunu nasıl başarabilirim? Yardımınız ve rehberliğiniz çok takdir edilecektir. Teşekkür ederim.

güncelleme

Bu benim ben bilgi tıklamadan önce benzemek istiyorum nasıl:

: onun böyle olmasını tıklandığında

Ve

** güncelleştirme ** Ne zaman? az alfabe varsa uygulanan position:absolute.video-description genişlik boyutunda küçülür:

Answer 1

CSS böyle bir şey gerekir:

.video-wrapper{ 
    position: relative; 
    box-shadow: 0px 0px 10px 0px; 
    overflow: hidden; 
} 

.video-description { 
    position: absolute; 
    display: none; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

.video-info{ 
    position: relative; 
    z-index: 1; 
} 

jQuery:

$('.video-info').click(function(){ 
    $('.video-description').fadeToggle(); 
}); 

DEMO

Answer 2

Bu

aşağıdaki kodu deneyin ulaşmak için jQuery kullanabilirsiniz:

jQuery(".video-description").on('click',function(){ 
    jQuery(".video-description").insertBefore(jQuery(".video-thumbnail")); 

}); 

Umarım yardımcı olur ....!

Answer 3

Bunu basit jQuery ile başarabilirsiniz.

Sana iki örnekler hazırladık: Aşağıdaki jQuery kullanmak

DEMO 1

DEMO 2

:

// DEMO 1 
$(document).ready(function() { 
    $('.info').click(function() { 
     $('.video-description').slideToggle();   
    }); 
}); 

// DEMO 2 
$(document).ready(function() { 
    var clicked = false; 
    $('.info').click(function() { 
     $('.overlay').slideToggle(); 
     if (!clicked) { 
      $('.info').animate({top: "115px"}, 500); 
      clicked = true; 
     } else { 
      $('.info').animate({top: "0px"}, 500); 
      clicked = false; 
     } 
    }); 
}); 

Her iki demoda da, gerekli tüm HTML, CSS ve jQuery'yi bulacaksınız. Kodu dikkatli bir şekilde incelerseniz, etkileri kendiniz çoğaltabilirsiniz. bilgisini göstermek için include jQuery in your document.