Sunday, December 24, 2017

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

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 vistor aapke blog par jayda time ruka rahe. Aaj is post me aapko blog website image hover effects ke 5 best image haver effects ke bare me bataunga. Jo aapne professional blog website par dekhe honge.



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



Top 5 best css image hover effects for Blog website Images.

Css image hover effects ko add kanre ke liy 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. Zoom Out on hover Css:-

zoom havor effect on image

Zoom out image hover effects image ko zoom karta hai. ye bahut acha animation dalta hai iamges par. Ye aapke blog ke image ko zoom out aur zoom in karta hai. Zoom out image 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 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 image haver effect 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 havor effect 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 aapne 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 havor effect 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.


About Author:-author Hello everyone my name is sultan i am sharing in this Blog About Blogging And technology Make Money online, Web Design, Internet Tips And tricks Etc Unique Article Everyday. Learn something new here....

Let's Get Connected:- Facebook | Twitter | Google Plus

0 comments: