Mobile Friendly Website


Doing it with style

inline pop-ups COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

I would like to move the position of the pop-up? is that possible? I have working in an i-frame, I do not want it to scroll or get cut off. Thanks for your help in advance..troy
(17.08.2006, 14:44)

The popup pics can also be animated gifs for an interesting effect. Another site with similar ideas is css/edge where I got the idea for an navigation bar effect seen on my site: (no I'm not selling anything). Just mouse over the lower links on the left to see little pop up gifs that demonstrate what the link is about.
(22.08.2006, 19:35)

Daniel, css/edge is the site that started me off on the road to learning CSS.
It's a pity that Eric Meyer has not progressed with his examples as the ones
on this site are now several years old.
However, they are still of use to anyone starting out with style sheets.
(22.08.2006, 20:38)

I absolutely love this bit of code and would love to put it to use. Unfortunately, the fact that it does not work in Safari is a bit of a deal breaker for the Mac related site I am helping with. Any hints as to what to play with to see if there's a work-around?
(24.08.2006, 18:49)

Carlos, I have revised this very slightly so that it now work correctly in Opera v9.01. If you try it now in Safari to see if it also works in this browser.
(24.08.2006, 21:45)

When I place this in a scrolling div, the text with the link is also positioned absolute , so it scrolls too! Just something I observed.
Go easy on the cheap chips!
(26.08.2006, 04:57)

Got my terminlogy wrong...meant relative positioned, however, removing that then positioning the image cords from the top of page worked out fine.
You'll like these photos, Stu.
(26.08.2006, 10:23)

Stu, it works perfectly in Opera now. Unfortunately, that's not the case in Safari. The demo links you have for this style, for example, only show a horizontal sliver of the bottom of the pop-up image when hovering on the link (though I did not check to see if the changes you made to the code have been applied to the demo). On my end, I tried it out with a square image (48x48) and made the appropriate changes in the CSS (changed all width and height tags that are not "0" to 48px; I also changed "top" to "-48px" so that the image pops up above the link). What I see when hovering on the link in Safari is just the left half of the image, with the left border intact, the right border invisible, the top border cut in half (like the image) and, (perhaps herein is a clue) the bottom border complete. I will play with the CSS and report back if anything I do makes a difference.
(26.08.2006, 16:27)

Carlos, Safari probably does not like the fact that these are inline pop-ups and is only showing the part of the image that is inline with the text.
Opera has a bug in that the hidden image appears when you rollover its hidden position, that is why I had to add a height:0; Unfortunately I do not have a Mac so cannot help with this one.
(26.08.2006, 16:45)

I like this CSS code, but sometimes it's little annoying.
Is there any possibility to show "big" image not after hover but after click?
(30.10.2006, 13:47)

10 of 27 comments (part 2). [ « ] [ » ] [ * ]


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page