top css hover image effect blogspot blogger ke liye jarur padhe

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 

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

.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 {
opacity:0.7;
filter:alpha(opacity=50);
}

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);
}

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%);
}

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);
}

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;
}

template me code kaise add karte hai janiye step by step

1. sabse pahle apko apne blogger.com me log in karke apne blog ke dashboard me jana hoga
2. uske baad apko TEMPLATE pe click karna hoga
3. ab apko EDIT HTML PE click karna hoga fir apko CTRL+F press karna hai
4. ab apko ek search box show hoga usme apko  ]]></b:skin> code search karna hai
5. jab apko ye code mil jaye to apko niche diya gaya apko]]></b:skin> ke uper pest karna hai 
6. 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 

request for you/agr apki thodi bhi help hui hai to

plzzz share this post with your frnds
 thannkxxx for read this

Share this

gaurav   BLOGGING   HTML CODE   templates

Receive Quality Articles Straight in your Inbox by submitting your Email below.

Related Posts