I was wondering if anyone knows how Engadget does their image hover effect where a a bracket appears under the images which are links. I like the effect, but for some reason I am having trouble figuring it out to make my own.
Example, mouseover the image in the following post:
http://www.engadget.com/2007/08/17/stealth-computer-rolls-out-lpc-350pci-little-pc/ |
Not sure about Engadget's method, but one thing you could probably do is use HTML like this
<a href="..." class="specialHover"><img src="..." alt="" /></a>
... and then in the CSS perhaps something like this:
a.specialHover {
display: block;
padding-bottom: 20px;
}
a.specialHover:hover {
background-image: url(bluebottomline.gif);
background-position: 0 100%;
background-repeat: no-repeat;
}
Perhaps there are other hacks along those lines. This is just an idea, not sure if this idea would also work with this exact line... |
Yeah, it was the underline wrapping around the image that really caught my eye since it's a pretty unique effect. And I expected the implementation might be a bit bulky to display properly in all browsers, but I was surprised when I wasn't finding any CSS driving it. Their image tags and surrounding divs don't have any class or style specified, which is what threw me, since they're not just styling all img objects in their content div either.
If I don't find anything I may just go with the implementation you mentioned, which would still be a nice effect. |
CSS:
img{border:none;}
a:hover{background-color: #000;}
<a href="..."><img src="..." alt="..." hspace="2" vspace="2"></a>
It's the hspace and vspace.
<<This attribute specifies the amount of white space to be inserted to the (left and right)/(above and below) of an IMG, APPLET, or OBJECT. The default value is not specified, but is generally a small, non-zero length.>>
http://www.w3.org/TR/html4/struct/objects.html#adef-hspace
|
Ah, I got it now....I kept thinking it was some border thing but actually there's just a colored block for the a element and the hspace and vspace are just making parts of it visible. Thanks, Haochi! |
