मेरे पास एक वेबसाइट है जो बूटस्ट्रैप कार्ड-डेक का उपयोग करके डिज़ाइन दिखाती है। मैंने यह सुनिश्चित करने के लिए सीएसएस का उपयोग किया है कि कार्ड में हमेशा समान चौड़ाई और ऊंचाई होती है, लेकिन मैं चाहता हूं कि जब उपयोगकर्ता उस छवि पर होवर करे जो उसके पूर्ण रिज़ॉल्यूशन में प्रदर्शित हो। ऐसा लगता है कि यह नहीं उठा रहा है कि मैं अपने चयनकर्ता का उपयोग कैसे कर रहा हूं

मैंने सीएसएस और बूटस्ट्रैप दस्तावेज़ों को देखने का प्रयास किया है लेकिन मुझे यह नहीं पता कि मेरा कोड कहां गलत है।

HTML कोड:


  <div class="col-sm-6 d-flex justify-content-start ">

      <div class="card-deck d-flex justify-content-start">
     <div class="card bg-dark text-white">
       <img class="card-img" src="https://images.unsplash.com/photo-1568312442641-d6c790fdf0f6?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="">
       <div class="card-img-overlay">
         <h5 class="card-title"><a class="text-white" href="C:\Users\Bruno\Desktop\bootstrap try outs\project find images\nature.html">Nature</a></h5>


       </div>

     </div>

      </div>

    </div>


सीएसएस कोड जिसका उपयोग मैं सभी कार्डों के लिए समान रिज़ॉल्यूशन प्राप्त करने के लिए करता हूं

.card-img {
    width: 100%;
    height: 35vw;
    object-fit: cover;
}

सीएसएस कोड जो होवर पर आईएमजी पूर्ण आकार बनाना चाहिए। (मैंने केवल कक्षा चयनकर्ता का उपयोग करने का भी प्रयास किया)

div>.card-img:hover{
  width: 10%!important;
  height: 100%!important;
  object-fit: cover!important;
}

मैं चाहता हूं कि जब उपयोगकर्ता छवि पर होवर करता है, तो यह अपने मूल संकल्प को पुनः प्राप्त करता है ताकि उपयोगकर्ता न केवल फसली छवि को देख सके

0
Bruno Seriese 16 सितंबर 2019, 03:23

1 उत्तर

सबसे बढ़िया उत्तर

.card-img-overlay div छवि के ऊपर बैठा है, इसलिए होवर प्रभाव कभी भी ट्रिगर नहीं होता है यहां तक ​​​​कि अगर इसे ट्रिगर करना था, तो भी मुझे नहीं लगता कि यह वह हासिल करेगा जो आप चाहते हैं, क्योंकि छवि झिलमिलाहट करेगी। आप जो करना चाहते हैं वह JavaScript mouseenter ईवेंट के साथ सबसे अच्छा किया जाता है

0
Nsoseka 16 सितंबर 2019, 03:40