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: 7 years ago
Size: 1,347 bytes


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