Adding overlay to WordPress images

directaxcess · Feb 25, 2012

I want to add a little "zoom icon" overlay to my WordPress images... any idea how I can do that? (not on hover, just regularly there).

WordPress forums seems to be dead so I thought I'd ask here.

Mulala · Feb 25, 2012

What do you exactly mean?

directaxcess · Feb 25, 2012

Like adding an image on top of another image. Check it out @

Code:

www.sportnomics.com

, you'll see some of the images on the front page have a zoom icon to indicate that it can be enlarged.

appman360 · Feb 25, 2012

What they seem to do is add a span containg the zoom image on top of the image. It's probably part of the theme.

Assuming you have the lightbox, if you add this inside the <a> tag

HTML:

<span class="zoom"></span>

then in your css add

HTML:

/* lightbox zoom image */ .post-image .lightbox {     position: relative;     display: inline-block;     zoom:1;     *display:inline;     max-width: 100%; } .post-image .lightbox .zoom {     width: 40px;     height: 40px;     background: url(images/icon-zoom.png) no-repeat center center;     margin: -20px 0 0 -20px;     position: absolute;     top: 50%;     left: 50%;     -webkit-border-radius: 10em;     -moz-border-radius: 10em;     border-radius: 10em; }

and upload the image it should work

hope it helps

Adding overlay to WordPress images

directaxcess

Senior Member

Mulala

Newbie

directaxcess

Senior Member

appman360

Newbie

Main Menu

Marketplace

Making Money

BlackHat World