iframe as thumbnail

Based on a question from StackOverflow. While this technically works, it's heavy and the rendering of the iframes isn't good - use thumbnails of the sites instead.

by Dor Cohen

HTML

<!-- .preview keeps dimensions of scaled iframe under control -->
<div class="preview">
  <iframe src="http://sampson.ms" sandbox></iframe>
</div>

<div class="preview">
  <iframe src="http://appendto.com" sandbox></iframe>
</div>

CSS

/* Without this class/container, the scaled iframes maintain
   their massive (pre-scaled) dimensions */
.preview {
  width: 204px; height: 152px;
  overflow: hidden;
  display: inline-block;
  position: relative;
}

/* iframes are initially set large enough to get a good view
   of the contained page. They are then scaled down to one-
   tenth their original size */
.preview iframe {
  width: 1020px; height: 768px;
  -webkit-transform: scale(.2); -webkit-transform-origin: 0 0;
  -moz-transform: scale(.2); -moz-transform-origin: 0 0;
  -ms-transform: scale(.2); -ms-transform-origin: 0 0;
  -o-transform: scale(.2); -o-transform-origin: 0 0;
  transform: scale(.2); transform-origin: 0 0;
}

/* Prevents the user from interacting with the iframe page */
.preview:after,
.preview::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
}