Jump to content

urbanmari

Members
  • Content count

    1
  • Joined

  • Last visited

Profile Information

  • Real Name
    Mari Vega
  1. urbanmari

    Pop Up Mouseover Images

    What Porpoise1954 wrote makes a bunch of sense but, for the many aspiring shop admins, it would help to get this CSS code interpreted into some easy steps. I'm an intermediate noob and, using Firefox's WebTools, was able to view the code of the stylesheet.css used in the nifty site he referred to. Now, what's next? The relevant code bits seem to be: /* Code for Product Info Popup images */ .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: #ffeeaa; padding: 10px; border: 1px dashed red; visibility: hidden; color: #034B82; font-size: 16px; font-style: oblique; font-weight: bold; text-decoration: none; margin-top: -150px; margin-left: -500px;; margin-right: 10px; margin-bottom: 10px; width: 450px; text-align: center; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 5px; /*width: 365px; height: 365px;*/ } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; margin-right: 10px; margin-bottom: 10px; /*position where enlarged image should offset horizontally */ } /* Code for Product Listing Popup images */ .thumbnail2{ position: relative; z-index: 0; } .thumbnail2:hover{ background-color: transparent; z-index: 0; } .thumbnail2 span{ /*CSS for enlarged image*/ position: absolute; background-color: #ffeeaa; padding: 10px; border: 1px dashed red; visibility: hidden; color: #034B82; font-size: 16px; font-style: oblique; font-weight: bold; text-decoration: none; margin-top: -100px; margin-left: 0px;; margin-right: 10px; margin-bottom: 10px; width: 450px; text-align: center; } .thumbnail2 span img{ /*CSS for enlarged image*/ border-width: 0; padding: 5px; /*width: 365px; height: 365px;*/ } .thumbnail2:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; margin-right: 10px; margin-bottom: 10px; /*position where enlarged image should offset horizontally */ } /* Code for Easy Coupons Info Popup */ .easyInfo{ position: relative; z-index: 0; } .easyInfo:hover{ background-color: transparent; z-index: 50; } .easyInfo span{ /*CSS for enlarged image*/ position: absolute; background-color: #FFD860; padding: 10px; border: 1px dashed red; visibility: hidden; color: #034B82; font-size: 16px; font-style: oblique; font-weight: bold; text-decoration: none; margin-top: -380px; margin-left: -500px;; margin-right: 10px; margin-bottom: 10px; width: 650px; text-align: center; } .easyInfo span img{ /*CSS for enlarged image*/ border-width: 0; padding: 5px; } .easyInfo:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; margin-right: 10px; margin-bottom: 10px; /*position where enlarged image should offset horizontally */ } So which OSCommerce file(s) would need to be modified to get the desirable effect of enlarged images on mouseover using css?
×