HomeCSS Tutorials

Styling WordPress Post Images

Like Tweet Pin it Share Share Email

Aaj main aapko bataunga ki kaise WordPress post ki images ko aap new stylish look de sakte hain.

Normally Post me aapki images jyada attractive nahi lagti, specially jab aap Post me kafi sari images upload karte ho to images normal look me kafi low standard lagti hain.




Apni Post ki image me alag-alag effect and style dekar aap images ka look attractive to bana hi sakte hain, sath readers par bhi iska achha impression padta hai.

Agar aapko bhi apni posts ki images ko stylish look dena hai to just follow this tutorial.

How To Make Post Images more attractive in WordPress

Below kuch CSS styles hain jo aapko sirf apni site me add karna hai.

WordPress me Appearance » Edit CSS par aapko CSS image style code add karna hai and you are done!

Border Around Images

1

Try this CSS code, just add it on WordPress Edit CSS and save.

Now See Result




image border CSS

  • Above code me agar aapko Border ka color change karna hai to #1cbee6 ki jagah other css color try kare
  • Agar aapko border ki width ko change karna hai to border-width me 5px ki jagah other size add kare
2

Yah Simple border style ko try kare, just add below CSS style and save.

Now see Result

image border css

  • Image border ka color change karne ke liye #1cbee6 ki jagah other css color use kare and border ki width change karne ke liye 1px ki jagah other size add kare

Image Shadow Effect

Image shadow effect aapki post images ko more attractive banati hain, aap below shadow effect use kar sakte hain apni site me

1

Shadow effect 

Just paste below CSS style in wordpress and save.

Now see Results

image shadow effect




  • Above shadow effect me aapki images more clear show karti hain.
2

Shadow Effect 

Paste this shadow effect in wordpress, click Edit CSS and paste below CSS style.

Now See result

image shadow effect

3

Shadow Effect With Zoom effect 

Is shadow effect me zoom effect hai, jab aap image par mouse hover karenge to image zoom hogi.

Just paste below CSS style and save.

Now preview karke check kare.




4

Shadow effect

Try this effect, just paste below code in edit CSS

Now See Result

image shadow effect

Try Online CSS Tool

Aap online CSS generator tools ka bhi use kar sakte hain, apne according aap CSS style image ke liye bana sakte hain wo bhi live preview ke sath.

Try these online CSS generator tools.

Waise wordpress par images me border add karne ke liye plugin bhi available hai, but itne small work ke liye hum plugin use kyu kare. CSS style se aap easily apni post images me border and shadow effect add kar sakte hain.




Comments (6)

Leave a Reply

Your email address will not be published. Required fields are marked *