ByMr. Sultan Posted on Design Blog, TOP 5

Top 5 Css Image Hover Effects For Website Images

Top 5 stylish css image hover effects for website images. kya aap apne website image zoom on hover effects etc add karna chahte hai. Blog website ko smart ya professional design karne ke liye hame blog par bahut sare customization karne hote hai.

Taki reader blog website par attract ho jaye. I mean visitor aapke blog par jayda time ruka rahe. Aaj is post me aapko blog website css image hover effects ke 5 best image hover effects ke bare me bataunga. Jo aapne professional blog website par dekhe honge.

image hover effects

 

Css image hover effects ya image hover effect ko add karne ke liye aapko kuch simple step ko follow karna hai. aur apne blog website ke image me effects add kar skate hai. to chaliye jante hai. top 5 best css image hover effects design for websites images.

Top 5 Best Css Image hover Effects For Blog website Images.

Css image hover effects ko add kanre ke liye aap last me diye gaye step ko follow kariye . ushe phale aap css image hover effects design ko select kare uske diye step ko follow karke aapne blog me add kare.

 

1. Image Zoom On hover :-

zoom havor effect on image
image zoom on hover effect image ko zoom karta hai. ye bahut acha animation dalta hai iamge par. Ye aapke blog ke image ko zoom out aur zoom in karta hai.image zoom on hover effect css3 code:-

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

 

2. Opacity Image Hover Effect:-

opacity image hoave effects

Opacity iamge haver effects bhi image bahut effect dalta hai. Aur image ko highlight kar deta hai. jaise hi mouse cursor image par jata hai. ishe ham opactiy image havor effects kahte hai.

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

 

3. Reflection on Image Hover effect:-

reflection iamge havor effect

Reflection effect image ko reflection effect dalta hai. jiase mouse cursor image par jata hai. waise hi image par reflection effect aha jata hai. ye bhi best css image hover effect hai

.post img{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } .post img:hover { opacity: 1; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); /*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); }

4. Blur Effect On Blogger images:-

blur effect on images

Blur effect sayad aap jante hi honge. blur effect me image ko thoda dundla ho jayega. ye bhi aapke blog website ke image me bahut acha effect dalega.

.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-filter: blur(5px); }

 

5. Brightness Image Hover effect:-

brightness on image hover effects.

Brightness css image hover effects me aapke blog ke image me pasie jaise hi mouse cursor le jayega. wiase hi image highlight ho jayegi. ye bahut acha image havor effect hai.

 

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

Ab aap in 5 best css image hover effects me khoi sa bhi design select kar le. aur blog me add karne ke liye niche diye gaye simple step ko follow kariye.

 

How to Add Css image hover effect on blog website images.

Blog website me image hover effects ko add karne ke liye niche diye gaye step ko follow kaariye.

Step 1.

  1. Sabse pahle aapne blogger dashboard me theme par click kariye
  2. Ab Edit HTML par click kariye.
  3. Ab apne template par click karke CTRL+F press kare.
  4. Aur search box me ]]></b:skin> code ko search kare.
Step 2.
  1. Ab ]]></b:skin> code ki uper code ko paste kar de.
  2. In 5 css image effects me se khoi sa bhi code copy karke paste kar de.
  3. Finally save template par click kar de.

Ab aapke blog post image me css image hover effect add ho gaya. blog me css iamge hover effect ko add karna bahut simple hai. lekin agar aapke blog me code work nhi kar rha hai. ya add karne me khoi problem ho rahi ho to aap comment karke puch skate hai.

Hamne apne ek previews post me 10 best marquee slider effects ke bare me bhi bataya hai. aap us post ko bhi jarur read kare.

I hope aapko top 5 best css image hover effects  ke bare me post kaise lagi. comment karke jarur bataye. Aur is post ko social media aur other blogger ke sath jarur share kare.

Popular Posts:-
   o  4 best popular post blogger widgets and tool.
   o  Top 5 best custom search box design.
   o  top 5 best blogger ul bullet list design.

Similar Posts