The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

How to make a rollover imge with tooltips?

  • # May 20, 2013 at 1:23 am

    hi i have seen this gallery and i want to make the exactly the same
    how could i apply 2 effect at the same time on the img
    the rollover effect and the tooltips?
    that is the gallery link

    # May 20, 2013 at 5:15 am

    The image rollover is just a double wide image with both headshots on it that is re-positioned in hover

    # May 20, 2013 at 7:14 am

    This reply has been reported for inappropriate content.

    In modern browsers you can combine CSS sprite hover effects with pure css tooltips . See an example of this here .

    # May 20, 2013 at 8:15 am

    thank you Atelierbram very much it work for my if i need to make the same number of pic as the gallery at the link i have to duplicate the code?
    thanks Paulie_D youwas helpfull
    many thanks for this great forum

    # May 20, 2013 at 11:57 am

    This reply has been reported for inappropriate content.

    @alina12 : I’m afraid Layout in CSS and HTML is a bit more complicated then just copy and paste; there are many books on the subject. However I did update my Codepen to something that comes close to that team-portrait gallery that you want to replicate.

    # May 20, 2013 at 3:26 pm

    thank u very much it is so kind of you to help me

    # May 21, 2013 at 7:04 pm

    hi i made that cod but i cold not make the tool tips work could you help me

    # May 21, 2013 at 7:05 pm

    hi i made that code
    but i could not make the tooltips work
    could you help me?

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed