1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Adding overlay to WordPress images

Discussion in 'HTML & JavaScript' started by directaxcess, Feb 25, 2012.

  1. directaxcess

    directaxcess Power Member

    Joined:
    Sep 12, 2011
    Messages:
    780
    Likes Received:
    154
    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.
     
  2. Mulala

    Mulala Newbie

    Joined:
    Dec 11, 2010
    Messages:
    14
    Likes Received:
    2
    What do you exactly mean?
     
  3. directaxcess

    directaxcess Power Member

    Joined:
    Sep 12, 2011
    Messages:
    780
    Likes Received:
    154
    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.
     
  4. appman360

    appman360 Newbie

    Joined:
    Sep 21, 2011
    Messages:
    12
    Likes Received:
    5
    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