Css Image Rollover Using "visibility: Hidden"

CSS image rollover

[gimmestones]

Hello,

I've read a lot about using CSS to hide text or images (Matt Cutts blog etc.) and I have a couple of questions about this issue...

I use this technique to hide an image which contains extra info about a product I sell.
When the user hovers over a text link the image with product info is shown.

MY QUESTIONS:
1) I use visibility:hidden to only show an image when the user hovers over the text link "More Info". Is this technique safe when considering SERPs and SEO?

2) Is use a span containing text (see html code below: Tamara Aladin - 'Tuulikki' vase) which is hidden until an user hovers over the text link "More Info". Is this technique safe when considering SERPs and SEO?

----------------------------------------------------------------
The CSS-code I use (short version):

.gallerycontainer_b{
position: relative;

.thumbnail_b span
position: absolute;
visibility: hidden;

>>>> on rollover:
.thumbnail_b:hover span{
visibility: visible;

-------------------------------------
The HTML-code I use:

<div class="gallerycontainer_b"><div align="center"><a href="collectie_ta3_a.html" class="thumbnail_b">More Info<span class="popup_ontw">Tamara Aladin - 'Tuulikki' vase<br /><img src="../Images/glas_popup/ta_trood_info.jpg" alt="More Info" width="250" height="190"/><br />
</span></a></div></div>

Thanx!

[edited by: pageoneresults at 1:24 pm (utc) on June 18, 2007]
[edit reason] Removed URI Reference - Please Refer to TOS [/edit]

[gimmestones]

To be more specific:

1) If you hover over this text-link, a white coloured image is shown with extra productinfo, using the "css visibility:hidden" technique. Is this technique safe when considering SERPs and SEO?

2) If you hover the text-link "More Info", you'll also see the title of the image with a pink background saying: "Tamara Aladin - Tuulikki vase". This title is not part of the image and is HTML-text which is not visible for the visitor untill hovered over "More Info". Again I used the "css visibility:hidden" technique. Is this technique in this particular situation safe when considering SERPs and SEO?

Thanks.

[edited by: Robin_reala at 10:47 pm (utc) on June 18, 2007]
[edit reason] Removed URL as per TOS #13 [webmasterworld.com] [/edit]

[SuzyUK]

I would say it's fine.. as long as the link when clicked actually leads to a page with the same or more information

It's been said about the technique that it's perfectly viable and to use common sense, obviously if you're using it to "keyword stuff" and that same information is not available as a visible option, even on another page then perhaps the lines become gray, but in general as long as you're using a legitimate technique (which this is) for legitimate purposes (teaser/aesthetic/style extra) and you feel it would pass a hand review then it should be absolutely fine

It's very much like the "mystery meat" ads of old, where you had to hover over an image to find out more information, people didn't like them - but in this case as long as you already have a text teaser linking to another information page then I don't see a problem the "pop up" is just an additional extra to help the user decide if they want to visit the page, nothing wrong in it, but again watch the keyword stuffing and keep it natural there shouldn't be a bother

as to how it will affect SERPS/SEO then i would imagine duplicate content with the linked page might have an effect but I would presume the linked page would have much more content and could be worded slightly differently.. which would avoid that and also watch the density of keywords on the teaser pages if there is only a little text

above is IMHO, but as a CSS'er I'd say the technique is legitimate and I think that's the crux of all the hoohaa over "hiding techniques" - as long as you're using them legitimately and not abusing them it should be fine.. hand reviews are the only way abuse be detected with any certainty - your test is to view the page without CSS and see if still makes sense, or looks over stuffed/optimised..

algorithmically, I would assume that if an <a> element hides something (using whatever method) the bots (assuming they can parse CSS) would look for an <a:hover> element that unhides it using the opposite value, and if so that should negate a hiding flag! - in a perfectly simple world of course ;)

Suzy