Google Blogoscoped


[OT] Image hover effect

Niraj Sanghvi [PersonRank 10]

Friday, August 17, 2007
16 years ago3,427 views

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:

Philipp Lenssen [PersonRank 10]

16 years ago #

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...

Niraj Sanghvi [PersonRank 10]

16 years ago #

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.

Haochi [PersonRank 10]

16 years ago #

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.>>

Niraj Sanghvi [PersonRank 10]

16 years ago #

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!

Forum home


Blog  |  Forum     more >> Archive | Feed | Google's blogs | About


This site unofficially covers Google™ and more with some rights reserved. Join our forum!