सीएसएस इमेज लाइब्रेरी
- पिछला पृष्ठ सीएसएस ड्रॉपडाउन मेनू
- अगला पृष्ठ सीएसएस इमेज स्पाइन
CSS का इस्तेमाल इमेज लाइब्रेरी बनाने के लिए किया जा सकता है。
पीला ट्यूथिंग
लाल ट्यूथिंग
फूल और पौधे
फूल और पौधे
इमेज लाइब्रेरी
नीचे दिखाए गए इस इमेज लाइब्रेरी को CSS के द्वारा बनाया गया है:
उदाहरण
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="/i/photo/tulip-yellow.jpg">
<img src="/i/photo/tulip-yellow.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">यहाँ इमेज वर्णन जोड़ें</div>
</div>
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">यहाँ इमेज वर्णन जोड़ें</div>
</div>
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">यहाँ इमेज वर्णन जोड़ें</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">यहाँ इमेज वर्णन जोड़ें</div>
</div>
</body>
</html>
अधिक उदाहरण
- रिस्पोंसिव गैलरी
- CSS मीडिया क्वेरी का उपयोग करके रिस्पोंसिव गैलरी बनाना कैसे, डेस्कटॉप, पैडलेट और स्मार्टफोन पर भी अच्छा दिखती है。
- पिछला पृष्ठ सीएसएस ड्रॉपडाउन मेनू
- अगला पृष्ठ सीएसएस इमेज स्पाइन
