Saturday, 18 November 2017

CSS से खूबसूरत Image Gallery Design कैसे करें?

CSS image gallery tutorial

जैसा की आप सभी को पता है की CSS3 के अलग-अलग properties का use कर बहुत ही amazing चीजें बनायीं जा सकती हैं, आज हम ऐसा ही कुछ बनाने जा रहे हैं जो की दिखने में जितना आकर्षक है बनाने में भी उतना ही मजेदार है|

आज हम CSS से एक खूबसूरत photo gallery design करने वाले हैं और इसको बनाने के लिए हमने किसी की Javascript या jQuery का use नही किया है इसे केवल CSS3 से बनाया गया है इसलिए इसे design करना बहुत ही आसान है|

यह काम कैसे करेगा?

हम कई सारे images को मिलाकर एक simple photo collage create करेंगे, सभी images को अलग-अलग position और directions में दिखाई देंगे इसके लिए CSS properties का उपयोग करेंगे|

फोटो एक दुसरे के ऊपर हो सकते हैं और जब हम किसी एक इमेज पर mouse hover करेंगे तब वह इमेज बाकी सभी photos से ऊपर transition effects के साथ display होगा|

HTML और CSS से Image Gallery कैसे Design करें?

एक beautiful photo gallery design करने के लिए आपको HTML और CSS की जानकारी होनी चाहिए| CSS से image gallery बनाने के लिए आप नीचे दिए गये step by step tutorial को follow करते जाएँ|

Step 1: HTML Structure बनाएं सबसे पहले हम एक div बनायेंगे और उसमे सारे images को add कर देंगे :
<div class="gallery">
    <img src="image/01.jpg" />
    <img src="image/02.jpg" />
    <img src="image/03.jpg" />
    <img src="image/04.jpg" />
    <img src="image/05.jpg" />
</div>
यह आपके browser में कुछ इस तरह दिखाई देगा:

Image gallery html structure

Step 2: Photos की Position सेट करें अब सभी images की position को set करेंगे जिसके लिए CSS की position property की value हमें absolute रखनी होगी जैसा की आप नीचे देख सकते हैं:
 .gallery img {
    position: absolute;
}

ऐसा करने से images अपने default flow से हट कर एक दुसरे के ऊपर display होने लगेंगे जो की कुछ इस प्रकार दिखाई देंगे :

set image position to absolute

इसके बाद हम pseudo-class nth-of-type का उपयोग कर images को align करना शुरू करेंगे| यहाँ पर left और top property का use कर प्रत्येक photo को browser window से अलग-अलग distance पर display करेंगे|
.gallery img:nth-of-type(1) {
    left: 20px;
    top: 50px;
}
.gallery img:nth-of-type(2) {
   left: 150px;
    top: 50px;
}
 .gallery img:nth-of-type(3) {
    left: 250px;
    top: 50px;
}
 .gallery img:nth-of-type(4) {
    left: 350px;
    top: 150px;
}
.gallery img:nth-of-type(5) {
    left: 450px;
    top: 50px;
}
इस step के बाद आपका design कुछ ऐसा दिखेगा:

align images

Step 3: Images को Rotate करें इस step में हम CSS3 की transform property का उपयोग कर सभी photos को अलग-अलग angle पर rotate करेंगे इसका CSS code नीचे दिया गया है:
 .gallery img:nth-of-type(1) {
    left: 20px;
    top: 50px;
    transform: rotate(7deg);
}
.gallery img:nth-of-type(2) {
    left: 150px;
    top: 50px;
    transform: rotate(-7deg);
}
.gallery img:nth-of-type(3) {
    left: 250px;
    top: 50px;
    transform: rotate(10deg);
}
 .gallery img:nth-of-type(4) {
    left: 350px;
    top: 150px;
    transform: rotate(-4deg);
}
.gallery img:nth-of-type(5) {
    left: 450px;
    top: 50px;
    transform: rotate(12deg);
}
अब आपकी फोटो गैलरी इस प्रकार दिखाई देगी:
Rotate-image


Step 4: Photos पर Border add करें Image पर border डालने से पहले हम उसमे कुछ padding डालेंगे जिसके लिए padding property का उपयोग करेंगे|
.gallery img {
    position: absolute;
    padding:10px;
    background:#fff;
    border:1px solid #000
}
images पर border और padding add करने के बाद यह कुछ ऐसे दिखाई देगा:
image-border-using-css
 Step 5: Image पर Hover Effect add करना इस image gallery tutorial का यह सबसे interesting part है इसमें हम images पर attractive hover effect apply करेंगे|   जब photo के ऊपर mouse hover किया जायेगा तब वह इमेज pop out हो कर सबसे ऊपर show होने लगेगा|

इसके लिए हम दो CSS properties का use करेंगे:
1. z-index - इससे हम उस image को सबसे top पर display करेंगे| जिस element की z-index value सबसे ज्यादा होती है वह सबसे ऊपर display होता है|
2. transform: scale(1.3) - हम चाहते हैं की जब photo पर hover किया जाये तो उसकी size थोड़ी बढ़ जाये इसके लिए scale() का उपयोग करेंगे|

इसका कोड कुछ ऐसा होगा:
.gallery img:hover {
   transform: scale(1.3);
    z-index: 10;
}

जब image पर hover किया जाएगा तब यह कुछ ऐसा दिखेगा:
Image-gallery with hover effect

Step 6: Animation Effect डालना अब हम अपने image gallery को और interesting बनाने के लिए इसे animated बनाना होगा| हम transition property का उपयोग करके  hover effect की timing को control  कर सकते हैं|
.gallery img {
    transition: all 0.5s ease-out;
}

अब आपका image gallery पूरी तरह से बन कर तैयार है|

Live Demo

Image Gallery के लिए Complete HTML and CSS Code

इस design को बनाने के लिए उपयोग किया गया HTML और CSS के codes आपको नीचे दिए जा रहें हैं| आप चाहें तो इसे copy कर के run कर सकते हैं पर ध्यान रहे images के path change कर लें इसकी जगह खुद के system पर उपलब्ध images का उपयोग कर सकते हैं|

Complete HTML Code

<div class="gallery">
    <img src="image/01.jpg" />
    <img src="image/02.jpg" />
    <img src="image/03.jpg" />
    <img src="image/04.jpg" />
    <img src="image/05.jpg" />
</div>

Complete CSS Code
.gallery img {
  position: absolute;
  padding: 10px;
  background: #fff;
  border: 1px solid #000;
  transition: all 0.5s ease-out;
}
.gallery img:nth-of-type(1) {
  left: 20px;
  top: 50px;
  transform: rotate(7deg);
}
.gallery img:nth-of-type(2) {
  left: 150px;
  top: 50px;
  transform: rotate(-7deg);
}
.gallery img:nth-of-type(3) {
  left: 250px;
  top: 50px;
  transform: rotate(10deg);
}
.gallery img:nth-of-type(4) {
  left: 350px;
  top: 150px;
  transform: rotate(-4deg);
}
.gallery img:nth-of-type(5) {
  left: 450px;
  top: 50px;
  transform: rotate(12deg);
}
.gallery img:hover {
  transform: scale(1.3);
  z-index: 10;
}

हमे उम्मीद है की आपने यह article पढ़ कर CSS से एक amazing image gallery design कर ली होगी| आप अलग-अलग CSS properties का use करके इसे और ज्यादा attractive बना सकते हैं|

आपको हमारा यह article कैसा लगा जरूर बताएं|

नमस्कार, मैं विवेक, WebInHindi का founder हूँ| यह एक मात्र blog है जहाँ से आप web design & development के tutorials हिंदी में प्राप्त कर सकते हैं| अगर आपको हमारा यह ब्लॉग पसंद आये तो आप हमें social media पर follow कर हमारा सहयोग कर सकते हैं|

इस Post से सम्बंधित किसी भी तरह का प्रश्न पूछने या सुझाव देने के लिए नीचे comment कीजिये.
EmoticonEmoticon