Hover Effects with CSS3

Hover Effects with CSS3 Transitions and Animations

CSS-3 एक विशाल शक्तिशाली जरिया है वेब डिजाईनिंग में वेब पेज की सजावट के लिए | इस पोस्ट में हम जानेंगे की कैसे हम रचनात्मक तरीके से इस का उपयोग किया जा सकता है | हम ये जानेंगे की कैसे CSS-3 transition का प्रयोग करके थम्बनेल होवर इफेक्ट का निर्माण किया जा सकता है | होवर में उस थम्बनेल (चित्र) के बारे में संक्ष्पित जानकारी जोड़ सकते हैं, एक अलग स्टाइल में |

उपरोक्त बताये अनुसार का लाइव डैमो आप नीचे देख सकते हैं |

Happy new year

नया साल आपके लिए ढेर सी खुशियाँ ले कर आये

Read More

Happy new year

नया साल आपके लिए ढेर सी खुशियाँ ले कर आये

Read More

Happy new year

नया साल आपके लिए ढेर सी खुशियाँ ले कर आये

Read More

Happy new year

नया साल आपके लिए ढेर सी खुशियाँ ले कर आये

Read More

इस तरह के इफेक्ट को हम दो भागो में बांटेगे | पहला भाग HTML Mode
HTML मोड़ में चित्र व संक्ष्पित जानकारी निम्न अनुसार लिखेंगे

<div class="container">
<div class="thmmain"> 
<div class="view view-thm">
<img src="your-image-link-here" width="300"/>
<div class="mask">
<h2>Happy new year</h2>
<p>नया साल आपके लिए ढेर सी खुशियाँ ले कर आये </p>
<a href="URL" class="info">Read More</a>
</div>
</div>
<div class="view view-thm">
<img src="your-image-link-here" width="300" />
<div class="mask">
<h2>Happy new year</h2>
<p>नया साल आपके लिए ढेर सी खुशियाँ ले कर आये </p>
<a href="URL" class="info">Read More</a>
</div>
</div>
<div class="view view-thm">
<img src="your-image-link-here" width="300" />
<div class="mask">
<h2>Happy new year</h2>
<p>नया साल आपके लिए ढेर सी खुशियाँ ले कर आये </p>
<a href="URL" class="info">Read More</a>
</div>
</div>
<div class="view view-thm">
<img src="your-image-link-here" width="300"/>
<div class="mask">
<h2>Happy new year</h2>
<p>नया साल आपके लिए ढेर सी खुशियाँ ले कर आये </p>
<a href="URL" class="info">Read More</a>
</div>
</div>
</div>
</div>

उपरोक्त HTML कोड में जहाँ पर your-image-link-here लिखा है वहां पर अपने द्वारा चयनित लिंक लगायें |

उपरोक्त HTML कोड में जहाँ पर नया साल आपके लिए ढेर सी खुशियाँ ले कर आये लिखा है वहां पर अपने द्वारा चयनित विवरण लिखें |

उपरोक्त HTML कोड में जहाँ पर URL लिखा है वहां पर चित्र से संबंधित जानकारी देने के लिए लिंक लिखें |

नीचे वो CSS कोड है जिसे आपने सिर्फ एक बार अपने ब्लॉग के साइडबार में स्थापित करना है | कोड स्थापित करने के लिए निम्न चरणों का पालन करें |

1. ब्लॉग पर लान-इन करें |
2. लेआउट पर जाएँ |
3. Add a Gadget पर क्लिक करें |
4. HTML/Javascript विजेट का चयन करें |
5. उपरोक्त CSS कोड को पेस्ट करने के बाद सेव बटन पर क्लिक करें |

<style type="text/css">
.container{
 position:relative;
}
.thmmain{
 position:relative;
   max-width:620px;
    margin: 0 auto;
 float:left;
}
.view {
   width: 270px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff;
}
.view .mask,.view .content {
   width: 270px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.view-thm img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.view-thm .mask {
   background-color: rgba(255, 231, 179, 0.3);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-thm h2 {
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   color: #333;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-thm p {max-height:40px;
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 5px 20px 20px;
   text-align: center;
   color: #333;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-thm a.info {max-width:125px;font-size:12px;
 display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #FCE7B8;
   color: #000;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-thm:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-thm:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-thm:hover h2,.view-thm:hover p,.view-thm:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
</style>

क्या आपको ये लेख पसंद आया ? यदि हां !!! तो टिप्पणी अवश्य दें ताकि निरंतर लिखने की चाह बनी रहे |

"टिप्स हिन्दी में ब्लॉग" की हर नई जानकारी अपने मेल-बॉक्स में मुफ्त पाएं !