5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

What Is This Called? Help and Instructions Please

by halmo
4 replies
What is this called when the image enlarges on hover over, like on this page:
good food - Google Search

Would someone please tell me what this is called, and where I can find instructions on how to code this into a (NON-WordPress) page?

Thank you
#called #instructions
  • Profile picture of the author Marius Preda
    here is the code:

    The idea behind this is, to place an image into a certain container. Since we're talking about thumbnails that container would be an <a> tag. We set the size (width and height) of the container to desired values and we set the position property of the container to relative. Image inside has an absolute position. We use negative top and left values to offset the image. Container has overflow set to hidden so only a part of the image that is placed inside the container's actual area will be visible. The rest of it will be hidden. On a:hover we set the container's overflow to visible, and reveal entire image.
    <a href="#"><img src="image.jpg" alt="my image" /></a> Definition of the default state for thumbnails would be something like this:
    ul#thumbs a{ display:block; float:left; width:100px; height:100px; line-height:100px; overflow:hidden; position:relative; z-index:1; } ul#thumbs a img{ float:left; position:absolute; top:-20px; left:-50px; } <a> tag has defined width and height to whatever fits into our site's design. Also, overflow is set to hidden. We then play with negative top and left values to "crop" the image to a perfect fit. If you want to take this further, you can define cropping area for every single image you have in thumb list and target the area you would like to show.
    ul#thumbs a img{ float:left; position:absolute; top:-20px; left:-50px; } ul#thumbs li#image1 a img{ top:-28px; left:-55px; } ul#thumbs li#image2 a img{ top:-18px; left:-48px; } ul#thumbs li#image3 a img{ top:-21px; left:-30px; } . . . Now, when user mouse-overs it we set the overflow to visible:
    ul#thumbs a:hover{ overflow:visible; z-index:1000; border:none; } Note the z-index for both default and hovered container. This is very important because we want to place the hovered above it's siblings. Otherwise it would be placed below and the trick wouldn't be complete.
    {{ DiscussionBoard.errors[3617558].message }}
    • Profile picture of the author halmo
      Originally Posted by Marius Preda View Post

      here is the code:

      The idea behind this is, to place an image into a certain container. Since we're talking about thumbnails that container would be an <a> tag. We set the size (width and height) of the container to desired values and we set the position property of the container to relative. Image inside has an absolute position. We use negative top and left values to offset the image. Container has overflow set to hidden so only a part of the image that is placed inside the container's actual area will be visible. The rest of it will be hidden. On a:hover we set the container's overflow to visible, and reveal entire image.
      <a href="#"><img src="image.jpg" alt="my image" /></a> Definition of the default state for thumbnails would be something like this:
      ul#thumbs a{ display:block; float:left; width:100px; height:100px; line-height:100px; overflow:hidden; position:relative; z-index:1; } ul#thumbs a img{ float:left; position:absolute; top:-20px; left:-50px; } <a> tag has defined width and height to whatever fits into our site's design. Also, overflow is set to hidden. We then play with negative top and left values to "crop" the image to a perfect fit. If you want to take this further, you can define cropping area for every single image you have in thumb list and target the area you would like to show.
      ul#thumbs a img{ float:left; position:absolute; top:-20px; left:-50px; } ul#thumbs li#image1 a img{ top:-28px; left:-55px; } ul#thumbs li#image2 a img{ top:-18px; left:-48px; } ul#thumbs li#image3 a img{ top:-21px; left:-30px; } . . . Now, when user mouse-overs it we set the overflow to visible:
      ul#thumbs a:hover{ overflow:visible; z-index:1000; border:none; } Note the z-index for both default and hovered container. This is very important because we want to place the hovered above it's siblings. Otherwise it would be placed below and the trick wouldn't be complete.
      Marius, thank you for your detailed and quick response. I think I understand most of it. Is there a way that you could write the code out exactly the way it would go into an html file (say, with image1, image2, image3, image4), and also what goes into the css (it looks like some of these information would be or could be included in a css, is that right??) Thank you very much.
      {{ DiscussionBoard.errors[3617775].message }}
  • Profile picture of the author Marius Preda
    here you go
    <a href="#"><img src="picture.gif" alt="An arrow!" id="hover" > width="100" height="100" /></a>

    css:
    a img#hover { padding-top: 100px; overflow: hidden; height: 0; width: > 100px; background-image: url(picture.gif);} > > a:hover img#hover { padding-top: 100px; overflow: hidden; height: 0; > width: 100px; background-image: url(picture-hover.gif);}
    {{ DiscussionBoard.errors[3617838].message }}
    • Profile picture of the author halmo
      Originally Posted by Marius Preda View Post

      here you go
      <a href="#"><img src="picture.gif" alt="An arrow!" id="hover" > width="100" height="100" /></a>

      css:
      a img#hover { padding-top: 100px; overflow: hidden; height: 0; width: > 100px; background-image: url(picture.gif);} > > a:hover img#hover { padding-top: 100px; overflow: hidden; height: 0; > width: 100px; background-image: url(picture-hover.gif);}
      Thank you, very much.
      {{ DiscussionBoard.errors[3617919].message }}

Trending Topics