File: demo/demo.css

Recommend this page to a friend!
  Classes of Mark Rolich   JS Image Magnifier   demo/demo.css   Download  
File: demo/demo.css
Role: Auxiliary data
Content type: text/plain
Description: Demo css
Class: JS Image Magnifier
Show a zoomed version of an image under the mouse
Author: By
Last change: Added data attributes support, attachment to mutliple images via class, use thumbnail image if large is not set
Date: 3 years ago
Size: 1,347 bytes
 

Contents

Class file image Download
html, body { font: 16px 'Open Sans', Arial, sans-serif } pre, code { font: 17px 'Inconsolata', monospace; color: #333; } pre { background: none repeat scroll 0 0 #f8f8f8; border: 1px solid #e5e5e5; padding: 8px 15px; overflow: auto; border-radius: 5px; } h1, h2 { text-align: center } p { font-size: 16px; clear: both } table { width: 100%; border: solid 1px #4183C4; border-collapse: collapse; font-size: 13px } table th { color: #4183C4; background-color: #e8e8e8; text-align: left } table th, table td { border: solid 1px #4183C4; padding: 3px 5px } img { border: 0 } .wrapper { width: 800px; margin: 0 auto } .heading { color: #4183C4 } .note { font-size: 13px; line-height: 27px } .code { background-color: #4183C4; color: #fff; padding: 0 5px; border-radius: 2px } .magnifier-preview.example { border: solid 1px #555; text-align: center; line-height: 30px } .magnifier-info { float: left; border: solid 1px #ccc; width: 200px; height: 133px; clear: left; margin-top: -4px } .magnifier-thumb-wrapper.demo { float: left; padding: 0; margin: 0; top: 1px } #preview1 { width: 400px; height: 267px } #preview2 { width: 400px; height: 267px }