How to overlay images

by

I just got done doing this exact thing in a project. The HTML side looked a bit like this:

<a href="https://stackoverflow.com/questions/403478/[fullsize]" class="gallerypic" title="">
  <img src="[thumbnail pic]" height="90" width="140" alt="[Gallery Photo]" class="pic" />
  <span class="zoom-icon">
      <img src="/images/misc/zoom.gif" width="32" height="32" alt="Zoom">
  </span>
</a>

Then using CSS:

a.gallerypic{
  width:140px;
  text-decoration:none;
  position:relative;
  display:block;
  border:1px solid #666;
  padding:3px;
  margin-right:5px;
  float:left;
}

a.gallerypic span.zoom-icon{
  visibility:hidden;
  position:absolute;
  left:40%;
  top:35%;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

a.gallerypic:hover span.zoom-icon{
  visibility:visible;
}

I left a lot of the sample in there on the CSS so you can see how I decided to do the style. Note I lowered the opacity so you could see through the magnifying glass.

Hope this helps.

EDIT: To clarify for your example – you could ignore the visibility:hidden; and kill the :hover execution if you wanted, this was just the way I did it.

More Related Contents:

  1. How can I make this background to see full?
  2. How to make an element width: 100% minus padding?
  3. Best way to center a on a page vertically and horizontally? [duplicate]
  4. Browsers’ default CSS for HTML elements
  5. How to set tbody height with overflow scroll
  6. Are class names in CSS selectors case sensitive?
  7. CSS content generation before or after ‘input’ elements [duplicate]
  8. Why doesn’t table > tr > td work when using the child selector?
  9. How to use CSS to surround a number with a circle?
  10. How to make a always full screen?
  11. Make an image responsive – the simplest way [duplicate]
  12. Position absolute and overflow hidden
  13. Use CSS to remove the space between images [duplicate]
  14. Borders disappear in Chrome when I zoom in
  15. Setting a width and height on an A tag
  16. Create a slanted edge to a div [duplicate]
  17. CSS – relative positioned parent div not stretching to absolute child div height
  18. How does the z-index property really work?
  19. Linking to CSS in an SVG embedded by an IMG tag
  20. How to rotate a 90 degrees?
  21. How do I make an input element occupy all remaining horizontal space?
  22. Understanding grid negative values
  23. Remove ‘:hover’ CSS behavior from element
  24. HTML + CSS: Numbered list with numbers inside of circles
  25. vs. font-weight:bold & vs. font-style:italic
  26. Add border to div increase div width?
  27. How to move placeholder to top on focus AND while typing?
  28. HTML/CSS set div to height of sibling
  29. Should Tables be avoided in HTML at any cost?
  30. Table vertical header?

Leave a Comment