hello frnds
aap sabhi blogging ka MAZAA le rahe hai or ham apko aaj fir apke blog me kuch mazedaar karne ki trick lekar aaye hai,frnds apne bahut se blogs me dekha hoga ki us blog ki kisi bhi imege per mouse le jate hai to kisi blog ka imege half spin hota hai or kisi ne hover effect laga rakha hai jisase usme kuch change ho jata hai jaise uska colour ka change hona etc to apka man bhi karta hoga ki aap apne blog me bhi aise hi kuch kar sakte to kitna accha hota to frnds aaj ham apko o sabhi trick or image effect ke baare me batayenge jo apko jarur try karna chahiye
plzzz share this post with your frnds
aap sabhi blogging ka MAZAA le rahe hai or ham apko aaj fir apke blog me kuch mazedaar karne ki trick lekar aaye hai,frnds apne bahut se blogs me dekha hoga ki us blog ki kisi bhi imege per mouse le jate hai to kisi blog ka imege half spin hota hai or kisi ne hover effect laga rakha hai jisase usme kuch change ho jata hai jaise uska colour ka change hona etc to apka man bhi karta hoga ki aap apne blog me bhi aise hi kuch kar sakte to kitna accha hota to frnds aaj ham apko o sabhi trick or image effect ke baare me batayenge jo apko jarur try karna chahiye
apko ham code de rahe hai aap try kare or jo accha lage usko use kare
1.Opacity
bahut saare bloggers is style ko use karte hai,bahut hi COOL style hai aap bhi use kijiye or dekhiye apke blog ke liye kaisa hai
code1
2.zoom out on hover
ye kuch alag hi style hai ye bahut hi accha hai jab koi imege pe mouse le jayega to imege autometic zoom hoga jo bahut slowly hota hai aap try kare
code2
.post img{
-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;
}
.post img:hover {
-o-transition: all 0.6s;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
-webkit-transform: scale(1.4);
}
-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;
}
.post img:hover {
-o-transition: all 0.6s;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
-webkit-transform: scale(1.4);
}
3.brightness
ye bhi ek accha option hai ham sabhi bloggers ke liye jo apne blog me kuch new karna chahte hai apne reader ko attract karna chahte hai to apko ye jarur try karna chahiye
code3
.post img{
-webkit-filter: brightness(60%);
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
-webkit-filter: brightness(100%);
}
-webkit-filter: brightness(60%);
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
-webkit-filter: brightness(100%);
}
4.360* rotate on hover
frnds agar apko uper di hui designe pasand nhi aai hai to apko style ek baar jarur use karna chahiye
code4
.post img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}
5. rotet and spin effect
is style ke baare me itna kaha ja sakta hai ki agar apko uper di hui style me se koi style nhi use karna hai to ye style jarur use kare bahut hi best hai rotet ke sath spin effect hai
code5
.post img:hover {
opacity: 1;
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
-moz-box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; rgba(0, 0, 0, .4);
-o-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
opacity: 1;
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
-moz-box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;
webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; rgba(0, 0, 0, .4);
-o-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
template me code kaise add karte hai janiye step by step
- sabse pahle apko apne blogger.com me log in karke apne blog ke dashboard me jana hoga
- uske baad apko TEMPLATE pe click karna hoga
- ab apko EDIT HTML PE click karna hoga fir apko CTRL+F press karna hai
- ab apko ek search box show hoga usme apko ]]></b:skin> code search karna hai
- jab apko ye code mil jaye to apko niche diya gaya apko]]></b:skin> ke uper pest karna hai
- ab apko apne template save kar dena hai
frnds ye rahi aaj ki post agar apko is post ke baare me kuch puchna hai to plzzz comment kare mai apki help jarur karunga
