यह आसान लगता है लेकिन किसी कारण से काम नहीं करेगा। रोलओवर के रूप में काम करने के लिए मुझे छवि 2 की आवश्यकता है और पहले के बीच में केंद्रित होना चाहिए लेकिन इसके ऊपर। मेरे पास यह अब तक है:

.image1 {
z-index: 1;
top: 10vh;
width: 100%;
position: static;
}

.image2 {
z-index: 3;
margin-left: auto;
margin-right: auto;
padding; 4vh;
position: fixed;
}
<div>
<img class="image1" draggable="false" src="https://icdn2.digitaltrends.com/image/google-campus-hq-headquarters-home-offices-720x720.jpg?ver=1.jpg" alt="Alt Tag">

<img class="image2" src="https://vignette.wikia.nocookie.net/logopedia/images/2/28/Google_2015.svg/revision/latest?cb=20170804092955" onmouseover="this.src='https://vignette.wikia.nocookie.net/logopedia/images/2/25/Google_2015_%28Black%29.svg/revision/latest?cb=20171130074159'" onmouseout="this.src='https://vignette.wikia.nocookie.net/logopedia/images/2/28/Google_2015.svg/revision/latest?cb=20170804092955'">
</div>

छवि एक ठीक प्रदर्शित करती है लेकिन छवि 2 इसके नीचे या छवि के शीर्ष के बजाय नीचे की सामग्री के शीर्ष पर प्रदर्शित होती है। मैं जावास्क्रिप्ट की तुलना में ऐसा करने के लिए सीएसएस का उपयोग करना चाहता हूं लेकिन रोलओवर होने पर वास्तव में कोई रास्ता नहीं ढूंढ सकता?

अग्रिम में धन्यवाद।

संपादित करें; इस तरह: यह कैसा दिखना चाहिए

1
user9642283 15 अप्रैल 2018, 23:45

2 जवाब

ऐसा लगता है कि यहां कुछ समस्याएं हैं। मुझे लगता है कि तुम इसे खोज रहे हो।

अपने div के लिए, इसे एक सापेक्ष स्थिति दें। फिर, प्रत्येक छवि के लिए, उन्हें एक पूर्ण स्थिति दें। उस बिंदु पर छवियों को एक दूसरे के ऊपर बैठना चाहिए और वहां स्थिति div के लिए पूर्ण होगी, न कि शरीर।

भूतपूर्व।

div {
  position: relative;
}

.img1 {
 position: absolute;
 z-index: 1;
}

.img2 {
 position: absolute;
 z-index: 2;
}
1
user9649266user9649266 16 अप्रैल 2018, 00:01
<div class="parent" style="background-image:url('https://icdn2.digitaltrends.com/image/google-campus-hq-headquarters-home-offices-720x720.jpg?ver=1.jpg');">
    <img class="image2" src="https://vignette.wikia.nocookie.net/logopedia/images/2/28/Google_2015.svg/revision/latest?cb=20170804092955" onmouseover="this.src='https://vignette.wikia.nocookie.net/logopedia/images/2/25/Google_2015_%28Black%29.svg/revision/latest?cb=20171130074159'"
onmouseout="this.src='https://vignette.wikia.nocookie.net/logopedia/images/2/28/Google_2015.svg/revision/latest?cb=20170804092955'">
</div>

क्या आप तस्वीर को div के लिए पृष्ठभूमि के रूप में जोड़ सकते हैं?

1
vSR3P 16 अप्रैल 2018, 00:10