you're reading:
CSS editing, Hover effects, Images, Mouseover effects, Rollover effects

Mouseover images, Lightbox style

http://wpbtips.wordpress.com/

If you have the Custom Design upgrade, you can create various mouseover effects. Here’s a solution I worked out for zooming from a thumbnail to a larger view of the image. This solution will display the larger view as a centered overlay, with the rest of the page blackened out (a-la Lightbox):
ZoomScreenshotP

The thumbnail can be captioned or not; the larger view can also be captioned or not (independently of the thumbnail).

For live examples see this demo post.

Drawback: unlike the true lightbox effect, there can be no ‘close’ button (it requires types of code we’re not allowed to use on wordpress.com); so, to return to the normal view of the page, you have to move the cursor outside the browser window.

Text editor

Insert the thumbnail the normal way, with or without a caption. Insert the same image again, as a full-size image, with or without a caption. (In both cases the “Link to” option should be set to None.) Then enclose the two image codes in divs this way:

<div class="lightbox">
THUMBNAIL CODE OR CAPTIONED THUMBNAIL SHORTCODE HERE
<div class="centeroverlay"><div class="overlay">
FULL-SIZE IMAGE CODE OR CAPTIONED IMAGE SHORTCODE HERE
</div></div>
</div>

CSS editor

If you’re only going to use full-size images without captions, paste this in the CSS editor:

.lightbox .centeroverlay, .lightbox .overlay {
display: none;
}
.lightbox:hover .centeroverlay {
display: table;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 111;
background-color: #222222;
background-color: rgba(0,0,0,0.9);
}
.lightbox:hover .overlay {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.lightbox:hover .overlay img {
height: auto;
width: auto;
max-height: 500px;
background-color: #ffffff;
border: 6px double #000000;
padding: 0;
}

If you’re also going to use full-size images with captions, add this as well:

.lightbox:hover .overlay .wp-caption {
margin: auto;
background: none;
color: #ffffff;
border: 0;
text-align: center;
}
.lightbox:hover .overlay .wp-caption p {
margin-top: 10px;
}

If you wish to display the bottom note I’ve added (“hover outside browser window to close”), add this too:

.mouseover:hover .overlay:after {
bottom: 0;
color: #999999;
content: "(hover outside browser window to close)";
display: table-cell;
font-size: 75%;
padding-bottom: 1%;
position: fixed;
text-align: center;
width: 100%;
}

Notes:
• You can decrease the decimal number in the rgba background rule, to increase the transparency.
• The #222222 above it is a fallback in case an outdated browser version doesn’t understand rgba.
• The table-cell display value that is used to center the overlay won’t work in IE7 or earlier.

http://wpbtips.wordpress.com/

Please don’t paste code in comments – see comment guidelines.
About these ads

Discussion

17 thoughts on “Mouseover images, Lightbox style

  1. It’s lovely, but in Chrome 28 I had a heck of a time getting back to the post. Clicking outside the photo didn’t do it, and then I realized I’d misread what you said. Once I clicked over to the scrollbar, I was able to return to the post. Not immediately intuitive. (Also, makes me wonder what WP.com is using on the “expired domain” overlay which does shut if you click outside the notice area.)

    Posted by JenT | August 1, 2013, 09:03
  2. The problem isn’t the overlay per se, the problem is I’ve made the overlay cover the whole browser window (in order to center the image and blacken the rest). The “expired domain” overlay isn’t like this, is it?
    Besides, we cannot use javascript but WP can. (Simple example: the “X” button on the gallery carousel.)

    Posted by Panos | August 1, 2013, 16:21
  3. No, it isn’t, if I’ve understood you correctly. The current version of the expired domain overlay allows you to click anywhere outside the notification area and then it goes away. When Mike and I first started harping at the HE’s last year that it was impossible to get past the overlay, we thought maybe at one point we were delusional. They kept saying there’s an X in the corner of the screen, but neither of us saw the X (and there was no X).

    Posted by JenT | August 6, 2013, 22:27
  4. Well, you know: if Matt says there’s an X and the rest of the world doesn’t see it, then clearly the rest of the world is delusional…

    As for the counter-intuitiveness of my invention, the only thing I can do is add a note at the bottom:
    http://panosdemos.wordpress.com/2013/05/26/mouseover-overlay-lightbox-style/
    What do you think – better or worse this way?

    Posted by Panos | August 7, 2013, 00:56
  5. You know me, I prefer straightforward, so better. :)

    Posted by JenT | August 8, 2013, 15:24
  6. Thanks Jen. Then I’ll keep the note in the demo, and update the post to include the required CSS (maybe as a separate section, so that one can omit it if they don’t like the note).

    Posted by Panos | August 11, 2013, 09:35
  7. I am so sorry to be posting this in the wrong thread, but I couldn’t find a link to your advice on the “word-wrap” issue in the title area of WordPress. That has driven me to bang my head into my keyboard more times than I can count. Thank you so much for your advice on forcing the page break between two long words-you have saved my future headlines…and forehead!! :)

    Posted by Writer/ Editor: Carrie B | September 12, 2013, 07:20
  8. Hi there – apologies for posting this here – comments have ben disabled for the topic re embedding flashplayer stuff on a WordPress blog. I’m trying to embed a photobook from Shutterfly in my WordPress blog, but every time I enter the code, nothing shows up. I tried using your shortcode, but I think I’m missing something. Can you assist? The embed code is here: http://textsnip.com/2uxlj7 Thanks in advance.

    Posted by jordanknol | September 12, 2013, 23:56
  9. Oops. Apologies – I just saw your disclaimer that you’re no longer offering support. Okay – I’ll keep trying. Thanks, anyway.

    Posted by jordanknol | September 13, 2013, 00:05
  10. Hi justpi, I set up a blog a short while ago to help victims of the Colorado flood in my town, Jamestown, CO. In a Help request I made on wordpress.com, timethief suggested we choose a different theme and pointed to you as someone who might be willing to make a theme suggestion. If you are willing to help would you mind taking a look at the help thread. You can communicate with me through that. Towards the end I listed the specific requirements and asked for a specific theme recommendation or just a few that we could select one from.

    http://en.forums.wordpress.com/topic/urgent-colorado-flood-related-issue?replies=8#post-1447001

    Thanks for any help you can give.

    Steve

    Posted by jimtownsteve | September 21, 2013, 19:36
  11. Good, I like this , it is really good I will try to for my [link removed - P.]

    Posted by xtremefueltreatmentreview | November 3, 2013, 07:05
  12. Hi Panos, You are, or I am, lost. My hard drive won’t mount and my backup won’t work (yet hoping?) You can delete this comment, but I cannot find you unless you contact me.

    Posted by Tess | November 19, 2013, 03:40
  13. I’m not sure what you’d like me to do! Do you mean you lost my email address?

    Posted by Panos | November 20, 2013, 00:49
  14. yes. lost your email addy and more.
    but no mind
    I found how to access my gmail with volunteers info.
    no worry.
    my computer died. lost a lot, but it may yet be recovered. Sorry to bother you. Please delete all of this. I am borrowing laptops and it’s not fun.

    Posted by Tess | November 20, 2013, 08:05
  15. how do you delete welcome message all together?

    because even when i type my message theres still a giant white space under it, like as if i typed above it not in it.
    & if i try to put a image in it, its the same thing. image then same size white space under it. modularity lite theme

    ** sorry for posting this in here i just didnt know where to leave this question for you :)

    Posted by dulceydinero | November 30, 2013, 02:08
  16. how do you delete welcome message all together?

    because even when i type my message theres still a giant white space under it, like as if i typed above it not in it.
    & if i try to put a image in it, its the same thing. image then same size white space under it.

    Posted by dulceydinero | November 30, 2013, 02:08
  17. im logging on to my site,
    dashboard
    posts
    new
    add media
    click from media library
    publish
    go to site

    nothing is in the white space, but i do see my picture on my posts at latest post. i do have the slide show enabled. its just a white space

    Posted by dulceydinero | November 30, 2013, 03:45

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 2,417,694 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: