CSS TutorialsWordpress

Styling WordPress Post Images

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


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

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


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.

Shadow Effect 

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

Now See result

image shadow effect


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.


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.

Related Articles


    1. Roshini, maine aapki gmail ID par already heading code sent kiya hai plz check it inbox or Spam folder.
      Wo headings CSS se style ki gayi hain, agar aap nahi kar sakti then give me ur login credential i will do it 4 u.

    1. EDIT CSS jo hai wo powered by jetpack hai.
      welcome to css editor wo sab remove kar de. Its nothing.

    1. Yah image CSS style aapki sabhi images me apply hoga. Choose any style and add to Edit CSS or theme CSS option