Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Image Effects >> Single Poloroid Image Rotate


Code Snippet </> Info


Snippet Name: Single Poloroid Image Rotate

Description: Create a poloroid picture that rotates on mouse hover and shows info text.

Example: View Code Demo

Note: Do not use the image... it is Copyright Natalie Downe.

Author: Natalie Downe

Last Modified: 2015-08-26 22:34:09

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Single Poloroid Image Rotate</title> <meta name="author" content="Natalie Downe"> <style type="text/css"> /* Begin Single Poloroid Image Rotate */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: Natalie Downe : http://media.24ways.org/2009/14/3/index.html : Creative Commons License == */ body {background-color:#E9E9E9;color:#333;font-family:"Lucida handwriting", "Snell Roundhand", "Helvetica Neue",Arial,Helvetica,sans-serif;font-size:16px;} a.polaroid {display:block;margin:10em auto 0 auto;text-decoration:none;color:#333;padding:13px 13px 26px 13px;width:200px;border:1px solid #BFBFBF;background-color:white;z-index:2;font-size:0.8em;-webkit-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);-moz-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);transform:rotate(10deg);-webkit-transition:-webkit-transform 0.5s ease-in;} a.polaroid:hover,a.polaroid:focus,a.polaroid:active {z-index:999;border-color:#6A6A6A;-webkit-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);-moz-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg);} .polaroid img {margin:0 0 15px;} a img {border:none;display:block;} </style> </head> <body> <div class="photo-album"><a href="http://www.flickr.com/photos/nataliedowne/2340993237/in/set-72157604232220981/" class="polaroid"><img src="http://media.24ways.org/2009/14/img/raft.jpg" alt="">White water rafting in Queenstown</a></div> <br /><br /> <div id="snippet"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_135.html">Single Poloroid Image Rotate</a> page. ] </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library