एक div div

Question

से ऊपर एक div रखें मेरे पास दो divs (#video-wrapper) के अंदर दो divs हैं।

एचटीएमएल:

<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> 

सीएसएस:

.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; 
} 

अब यह इस तरह दिखता है:

क्या मैं हासिल करना चाहते हैं #video-description को छिपाने के लिए है, और diplay यह #video-thumbnail से ऊपरसे ऊपर हैक्लिक किया गया है। मुझे यह कैसे हासिल होगा? आपकी मदद और मार्गदर्शन की बहुत सराहना की जाएगी। धन्यवाद।

अद्यतन

यह मैं इसे कैसे की तरह से पहले मैं जानकारी क्लिक करें देखने के लिए चाहते हैं:

और जब अपने इस तरह होने के लिए क्लिक किया:

** अपडेट ** जब लागू किया position:absolute.video-description चौड़ाई आकार में सिकुड़ अगर वहाँ कम अक्षर हैं:

Answer 1

आप सीएसएस में कुछ इस तरह की जरूरत है:

.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

आप प्राप्त करने के लिए इस

नीचे कोड का प्रयास करें jQuery का उपयोग कर सकते हैं:

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

}); 

आशा है कि यह मदद करता है ....!

Answer 3

आप इसे कुछ सरल jQuery के साथ प्राप्त कर सकते हैं।

मैं तुम्हारे लिए दो उदाहरण बना लिया है:

DEMO 1

DEMO 2

मैं निम्नलिखित jQuery कहाँ का उपयोग करें:

// 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; 
     } 
    }); 
}); 

दोनों डेमो में, आपको सभी आवश्यक HTML, CSS और jQuery मिलेगा। यदि आप ध्यान से कोड का अध्ययन करते हैं, तो आप अपने आप को प्रभाव दोहराने में सक्षम होना चाहिए। include jQuery in your document.