CSS Se Image Gallery Kaise Design Kare? CSS Image Gallery

0
429
css se image gallery kaise banaye
css se image gallery kaise banaye

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

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>

css image gallery

जैसा की आप 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 कर सकते है।

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 कर पूछ सकते है।

LEAVE A REPLY

Please enter your comment!
Please enter your name here