Grow your CSS skills. Land your dream job.

Icon Over IMG on Hover

  • # August 15, 2010 at 1:40 am

    How can I get a magnify icon to display over my thumbnails (img) on hover?
    You can see what I mean below:

    HOVER OFF:
    [attachment=1]bio_0000_Layer 2.jpg[/attachment]
    HOVER ON:
    [attachment=0]bio_0001_Layer 1.jpg[/attachment]

    Thanks in advance.

    # August 15, 2010 at 2:40 am

    You mean like an overlay image appearing over the img?

    Something like this might work:

    Code:
    <div id="container">
    <img src="img.jpg" alt="Image" />
    <div></div>
    </div>
    Code:
    div.container img + div {
    display: none;
    [... all other styling code ...]
    }

    div.container img:hover + div {
    display: block;
    }

    div.container div:hover {
    display: block;
    }

    The img will probably have to be a fixed height and width for it to display well. You’ll also need to position the overlay properly.

    # August 15, 2010 at 8:31 pm

    Sorry that doesn’t make any sense to me

    # August 16, 2010 at 7:16 pm

    Hey Realph,

    Not sure what your skill level is at. How are you trying to accomplish this? Basic HTML? jQuery? CSS?

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".