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: 2019-12-09 00:43:52
Language: css
Highlight Mode: css
|
| Copy Codes: Use Free Notepad ++ |
|
Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor
|
|
Copied To Clipboard!
<!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 https://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>
|
