Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Icon Over IMG on Hover

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #29939
    realph
    Participant

    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.

    #81593
    Kestral
    Member

    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.

    #81615
    realph
    Participant

    Sorry that doesn’t make any sense to me

    #81647
    TheDoc
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.