Icontem

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: 5 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
}