Forums

realph

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.

Kestral

You mean like an overlay image appearing over the img?

Something like this might work:

&lt;div id=&quot;container&quot;&gt;
&lt;img src=&quot;img&#46;jpg&quot; alt=&quot;Image&quot; /&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;


div&#46;container img + div {
display&#58; none;
&#91;&#46;&#46;&#46; all other styling code &#46;&#46;&#46;&#93;
}

div&#46;container img&#58;hover + div {
display&#58; block;
}

div&#46;container div&#58;hover {
display&#58; 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.

realph

Sorry that doesn't make any sense to me

TheDoc

Hey Realph,

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

treehouse : what would you like to learn today?

Forums

Icon Over IMG on Hover