Skip to content

Instantly share code, notes, and snippets.

@psd

psd/index.html

Created June 13, 2012 10:09
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save psd/2923224 to your computer and use it in GitHub Desktop.
Save psd/2923224 to your computer and use it in GitHub Desktop.
Download ZIP
iframe thumbnail
Raw
index.html
<!doctype html>
<html>
<head>
<title>page thumbnails using iframes and CSS3</title>
<meta charset="utf-8">
<style>
.thumbnail {
width: 300px;
height: 160px;
}
.thumbnail iframe {
width: 900px;
height: 480px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.3, 0.3);
-moz-transform: scale(0.3, 0.3);
transform: scale(0.3, 0.3);
overflow: hidden;
}
.thumbnail.overlay {
position: relative;
}
.thumbnail.overlay iframe {
position: relative;
z-index: 1;
}
.thumbnail.overlay a {
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
background-color: #fff;
opacity: 0;
}
</style>
</head>
<body>
<div class="thumbnail">
<iframe src="http://www.direct.gov.uk"></iframe>
</div>
<div class="thumbnail">
<iframe src="https://www.gov.uk"></iframe>
</div>
<div class="thumbnail overlay">
<a href="http://www.direct.gov.uk">link</a>
<iframe src="http://www.direct.gov.uk"></iframe>
</div>
</body>
</html>
@psd
Copy link
Author

psd commented Jun 13, 2012

http://whatfettle.com/2012/06/thumbs/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment