<figure>
  <img src="https://f.cl.ly/items/0P1l0i1o2M1M31450K1o/codepenfoto.jpg" />
  <figcaption>Framed flexible image<br>with nice dropshadow at the bottom edges</figcaption>
</figure>
@import url("https://fonts.googleapis.com/css?family=Amatic+SC:700");

body { background: #d9d2c7; font: bold 2.6em/1 "Amatic SC", cursive; text-shadow: 0 1px 0 #fff; color: #6d6964; text-align: center; min-height: 100%; padding: 2em 2em 4em; }

figure {
	position: relative;
	display: inline-block;
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-o-transform: rotate(-1deg);
	transform: rotate(-1deg);
}

figure:before, figure:after {
	content: "";
	width: 50%;
	height: 10%;
	position: absolute;
	bottom: 10px;
	z-index: -1;
	box-shadow: 0 14px 12px rgba(0, 0, 0, 0.35);
}

figure:after {
	right: 2%;
	left: auto;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	transform: rotate(2deg);
}

figure:before {
	right: auto;
	left: 2%;
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	transform: rotate(-2deg);
}

figure img {
	background: #FFF;
	background: -webkit-linear-gradient(left, #ebe8e6 0%, #fff 35%, #fff 65%, #ebe8e6 100%);
	background: -moz-linear-gradient(left, #ebe8e6 0%, #fff 35%, #fff 65%, #ebe8e6 100%);
	background: -o-linear-gradient(left, #ebe8e6 0%, #fff 35%, #fff 65%, #ebe8e6 100%);
	background: linear-gradient(left, #ebe8e6 0%, #fff 35%, #fff 65%, #ebe8e6 100%);
	display: block;
	max-width: 95%;
	height: auto;
	padding: 2.5%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255,255,255,1);
}

figcaption {
	position: absolute;
	width: 60%;
	left: 20%;
	bottom: -3em;
	-webkit-transform: rotate(1deg);
	-moz-transform: rotate(1deg);
	-o-transform: rotate(1deg);
	transform: rotate(1deg);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js