CSS Se Image Gallery Kaise Design Kare? : – Hello Friends ! आज के इस आर्टिकल में हम एक नई चीज सीखने वाले है। अगर आप html और Css सिख चुके है, तो आपको इससे अलग अलग चीज़े design करके देखना चाहिए। आज के इस आर्टिकल में हम भी आपको कुछ अलग बताने जा रहे है। आज हम आपको html और Css से एक Image Gallery Design करना सिखाएंगे।
एक Website में Image Gallery का होना आम बात है। और आपने अक्सर देखा होगा बहुत सारी Websites में Jquery से Image Gallery बनाई जाती है। और आपने कई सारे Effects भी देखे होंगे जो Jquery की Help से ही बनाये जाते है।
तो चलिए सीखते है कि कैसे CSS Se Image Gallery Kaise Design Kare? CSS Image Gallery
- Javascript Ko HTML Mai Kaise Insert Karte Hai? HTML In Javascript
- HTML or CSS Se Simple Slider Kaise Banaye?, HTML & CSS Slider
- HTML Se Blinking Text Effect Kaise Banaye ? HTML Blink Tag
- React Native Kya Hai? | What is React Native In Hindi | React Native Tutorial In Hindi
CSS Se Image Gallery Kaise Design Kare?
CSS gallery को सिखने से पहले आपको HTML और CSS की पूरी Knowledge होनी चाहिए तभी आप इसको Easily बना सकते हो। Gallery Design करने के लिए आप निचे दिए हुए html Code को Use कर सकते है।
HTML Code : –
<html>
<head>
</head>
<body>
<div class="gallery">
<a target="_blank" href="images/css-animation-kaise-banaye-min.jpg">
<img src="images/css-animation-kaise-banaye-min.jpg" alt="img" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="images/html-or-css-se-slider-kaise-banaye.jpg">
<img src="images/html-or-css-se-slider-kaise-banaye.jpg" alt="img" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="images/anchor-tag-kya-hota-hai.jpg">
<img src="images/anchor-tag-kya-hota-hai.jpg" alt="img" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="images/kisi-site-ka-traffic-kaise-pta-kare.jpg">
<img src="images/kisi-site-ka-traffic-kaise-pta-kare.jpg" alt="img" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
जैसा की आप Code में देख सकते है हमने एक gallery नाम की Class ली है उसके अंदर फिर anchor tag का Use किया है Link देने के लिए और target=”_blank” का Use किया है ताकि Image पर अगर हम Click करे तो Next Page पर Open हो।
उसके बाद img tag देके Image add की है। फिर उसके बाद एक और div लेके desc की class ली है Description add करने के लिए। और इसकी CSS भी हमने नीचे आपको दे दी है आपको उसको Use कर सकते है।
- Flutter Kya Hai? | What is Flutter in Hindi | पूरी जानकारी 2021
- React JS Kya Hai? | React JS Tutorial In Hindi | React JS In Hindi
- Node JS Kya Hai? | Node JS Tutorial In Hindi | Node JS In Hindi
- React Bootstrap Kya Hai? | React Bootstrap Tutorial In Hindi
CSS Code : –
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 300px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
Conclusion
इस Article में हमने आपको बताया है CSS Se Image Gallery कैसे Design करे ? हमने आपको पूरा html और CSS Code Provide किया है जो की आपको Easily समझ आ जायेगा। उम्मीद है यह लेख आपके लिए Helpful रहा होगा । अगर आपको मन में html और CSS को लेकर किसी भी तरह के कोई भी Question है तो आप हमें नीचे Comment कर पूछ सकते है।
