Hover Effects with CSS3 Transitions and Animations

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 मोड़ में चित्र व संक्ष्पित जानकारी निम्न अनुसार लिखेंगे

view source

print?

1	<div class="container">

2	<div class="thmmain">

3	<div class="view view-thm">

4	<img src="your-image-link-here" width="300"/>

5	<div class="mask">

6	<h2>Happy new year</h2>

7	<p>नया साल आपके लिए ढेर सी खुशियाँ ले कर आये </p>

8	<a href="URL" class="info">Read More</a>

9

</div>

10

</div>

11	<div class="view view-thm">

12	<img src="your-image-link-here" width="300" />

13	<div class="mask">

14	<h2>Happy new year</h2>

15	<p>नया साल आपके लिए ढेर सी खुशियाँ ले कर आये </p>

16	<a href="URL" class="info">Read More</a>

17

</div>

18

</div>

19	<div class="view view-thm">

20	<img src="your-image-link-here" width="300" />

21	<div class="mask">

22	<h2>Happy new year</h2>

23	<p>नया साल आपके लिए ढेर सी खुशियाँ ले कर आये </p>

24	<a href="URL" class="info">Read More</a>

25

</div>

26

</div>

27	<div class="view view-thm">

28	<img src="your-image-link-here" width="300"/>

29	<div class="mask">

30	<h2>Happy new year</h2>

31	<p>नया साल आपके लिए ढेर सी खुशियाँ ले कर आये </p>

32	<a href="URL" class="info">Read More</a>

33

</div>

34

</div>

35

</div>

36

</div>

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

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

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

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

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

view source

print?

1	<style type="text/css">

2	.container{

3	position:relative;

4

}

5

.thmmain{

6	position:relative;

7	max-width:620px;

8	margin: 0 auto;

9	float:left;

10

}

11

.view {

12	width: 270px;

13	height: 200px;

14	margin: 10px;

15	float: left;

16	border: 10px solid #fff;

17	overflow: hidden;

18	position: relative;

19	text-align: center;

20	-webkit-box-shadow: 1px 1px 2px #e6e6e6;

21	-moz-box-shadow: 1px 1px 2px #e6e6e6;

22	box-shadow: 1px 1px 2px #e6e6e6;

23	cursor: default;

24	background: #fff;

25

}

26	.view .mask,.view .content {

27	width: 270px;

28	height: 200px;

29	position: absolute;

30	overflow: hidden;

31

top: 0;

32

left: 0;

33

}

34	.view img {

35	display: block;

36	position: relative;

37

}

38	.view h2 {

39	text-transform: uppercase;

40	color: #fff;

41	text-align: center;

42	position: relative;

43	font-size: 17px;

44	padding: 10px;

45	background: rgba(0, 0, 0, 0.8);

46	margin: 20px 0 0 0;

47

}

48	.view-thm img {

49	-webkit-transform: scaleY(1);

50	-moz-transform: scaleY(1);

51	-o-transform: scaleY(1);

52	-ms-transform: scaleY(1);

53	transform: scaleY(1);

54	-webkit-transition: all 0.7s ease-in-out;

55	-moz-transition: all 0.7s ease-in-out;

56	-o-transition: all 0.7s ease-in-out;

57	-ms-transition: all 0.7s ease-in-out;

58	transition: all 0.7s ease-in-out;

59

}

60	.view-thm .mask {

61	background-color: rgba(255, 231, 179, 0.3);

62	-webkit-transition: all 0.5s linear;

63	-moz-transition: all 0.5s linear;

64	-o-transition: all 0.5s linear;

65	-ms-transition: all 0.5s linear;

66	transition: all 0.5s linear;

67	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

68	filter: alpha(opacity=0);

69	opacity: 0;

70

}

71	.view-thm h2 {

72	border-bottom: 1px solid rgba(0, 0, 0, 0.3);

73	background: transparent;

74	margin: 20px 40px 0px 40px;

75	-webkit-transform: scale(0);

76	-moz-transform: scale(0);

77	-o-transform: scale(0);

78	-ms-transform: scale(0);

79	transform: scale(0);

80	color: #333;

81	-webkit-transition: all 0.5s linear;

82	-moz-transition: all 0.5s linear;

83	-o-transition: all 0.5s linear;

84	-ms-transition: all 0.5s linear;

85	transition: all 0.5s linear;

86	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

87	filter: alpha(opacity=0);

88	opacity: 0;

89

}

90	.view-thm p {max-height:40px;

91	font-family: Georgia, serif;

92	font-style: italic;

93	font-size: 12px;

94	position: relative;

95	color: #fff;

96	padding: 5px 20px 20px;

97	text-align: center;

98	color: #333;

99	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

100	filter: alpha(opacity=0);

101	opacity: 0;

102	-webkit-transform: scale(0);

103	-moz-transform: scale(0);

104	-o-transform: scale(0);

105	-ms-transform: scale(0);

106	transform: scale(0);

107	-webkit-transition: all 0.5s linear;

108	-moz-transition: all 0.5s linear;

109	-o-transition: all 0.5s linear;

110	-ms-transition: all 0.5s linear;

111	transition: all 0.5s linear;

112

}

113	.view-thm a.info {max-width:125px;font-size:12px;

114	display: inline-block;

115	text-decoration: none;

116	padding: 7px 14px;

117	background: #FCE7B8;

118	color: #000;

119	text-transform: uppercase;

120	-webkit-box-shadow: 0 0 1px #000;

121	-moz-box-shadow: 0 0 1px #000;

122	box-shadow: 0 0 1px #000;

123	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

124	filter: alpha(opacity=0);

125	opacity: 0;

126	-webkit-transform: scale(0);

127	-moz-transform: scale(0);

128	-o-transform: scale(0);

129	-ms-transform: scale(0);

130	transform: scale(0);

131	-webkit-transition: all 0.5s linear;

132	-moz-transition: all 0.5s linear;

133	-o-transition: all 0.5s linear;

134	-ms-transition: all 0.5s linear;

135	transition: all 0.5s linear;

136

}

137	.view-thm:hover img {

138	-webkit-transform: scale(10);

139	-moz-transform: scale(10);

140	-o-transform: scale(10);

141	-ms-transform: scale(10);

142	transform: scale(10);

143	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

144	filter: alpha(opacity=0);

145	opacity: 0;

146

}

147	.view-thm:hover .mask {

148	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

149	filter: alpha(opacity=100);

150	opacity: 1;

151

}

152	.view-thm:hover h2,.view-thm:hover p,.view-thm:hover a.info {

153	-webkit-transform: scale(1);

154	-moz-transform: scale(1);

155	-o-transform: scale(1);

156	-ms-transform: scale(1);

157	transform: scale(1);

158	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

159	filter: alpha(opacity=100);

160	opacity: 1;

161

}

162

</style>

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

Read more: Hover Effects with CSS3 ~ Tips Hindi Mein http://cityjalalabad.blogspot.com/2012/12/hover-effects-with-css3.html#ixzz2PZHl8x61
Tips Hindi Mein : टिप्स हिंदी में, hindi tips, tips, टिप्स, टिप्स हिंदी में, हिंदी टिप्स, widget, HTML, HTML Tricks, tricks, photoshop, lal kitab
Under Creative Commons License: Attribution
Follow us: @vaneetnagpal on Twitter | TipsHindiMein on Facebook