multizoom.css 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. .magnifyarea { /* CSS to add shadow to magnified image. Optional */
  2. box-shadow: 5px 5px 7px #818181;
  3. -webkit-box-shadow: 5px 5px 7px #818181;
  4. -moz-box-shadow: 5px 5px 7px #818181;
  5. filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
  6. background: white;
  7. }
  8. .targetarea { /* CSS for container div(s) of the zoomable image */
  9. width: 325px; /* wide or wider than the widest zoomable image */
  10. height: 338px; /* high or higher than the tallest zoomable image */
  11. margin-top:3px;
  12. }
  13. #two { /* Added CSS for second target div of zoomable images */
  14. height: 243px; /* high or higher than the tallest zoomable image */
  15. }
  16. .targetarea img { /* zoomable image */
  17. margin: auto; /* for horizontal centering */
  18. display: block; /* also for horizontal centering */
  19. position: relative; /* along with on the fly calculations in script, for vertical centering */
  20. border-width: 0;
  21. }
  22. .thumbs { /* divs holding the trigger links - styles optional, used here to center their links below their respective zoomable image */
  23. padding-top: 25px;
  24. width: 325px;
  25. text-align: center;
  26. }
  27. .thumbs a { /* trigger links on the thumbnail images */
  28. text-decoration: none; /* avoid underlines of images, text or spaces in these links */
  29. }
  30. .thumbs img { /* trigger images - the thumbnails used to load new zoomable images into the targetarea */
  31. border-width: 0; /* avoid default borders in some browsers */
  32. }
  33. #description, #description2 {
  34. position: absolute; /* required for description folows image bottom (descpos: true) */
  35. width: 325px; /* should be width of zoomable image container (.targetarea) */
  36. text-align: center;
  37. font: bold 95% sans-serif;
  38. margin-top: 3px; /* when following image bottom, this sets a fixed distance for that */
  39. color: #222;
  40. background-color: #fff;
  41. }