Image pin

Pin image to a board design

by Shuva Mallick

HTML

<div class="content">
    <div class="front-images">
      <img src="http://swedishalgaefactory.com/wp-content/uploads/2015/11/tumblr_mo2x9xqeef1st5lhmo1_1280-300x200.jpg" alt="pic-1">
    </div>
  </div>

CSS

.content {
	text-align: center;
}
.front-images {
	display: inline-block;
	width: auto;
	text-align: center;
	background: #fff;
	margin: 15px;
  webkit-transform: rotateZ(-2deg) scaleX(1) scaleY(1) scaleZ(1);
  transform: rotateZ(-2deg) scaleX(1) scaleY(1) scaleZ(1);
  -webkit-box-shadow: -3px 5px 12px 0 rgba(0,0,0,0.1);
  box-shadow: -3px 5px 12px 0 rgba(0, 0, 0, 0.8);
}
.front-images:after {
  width: 30px;
  height: 30px;
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  left: 122px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  font: normal normal normal medium/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,0.9);
  background: -webkit-radial-gradient( 50% 50% , circle closest-side, rgba(25,119,196,1) 0, rgba(25,119,196,1) 4%, rgba(12,113,201,1) 77%, rgba(255,255,255,0) 89%, rgba(255,255,255,0) 100%), -webkit-radial-gradient( 50% 50% , circle closest-side, rgba(0,0,0,0.4) 0, rgba(0,0,0,0.2) 81%, rgba(255,255,255,0) 92%, rgba(255,255,255,0) 100%), -webkit-radial-gradient( 50% 50% , ellipse closest-side, rgba(64,150,238,1) 0, rgba(64,150,238,1) 100%), rgba(255,255,255,0.9);
  background: -moz-radial-gradient( 50% 50% , circle closest-side, rgba(25,119,196,1) 0, rgba(25,119,196,1) 4%, rgba(12,113,201,1) 77%, rgba(255,255,255,0) 89%, rgba(255,255,255,0) 100%), -moz-radial-gradient( 50% 50% , circle closest-side, rgba(0,0,0,0.4) 0, rgba(0,0,0,0.2) 81%, rgba(255,255,255,0) 92%, rgba(255,255,255,0) 100%), -moz-radial-gradient( 50% 50% , ellipse closest-side, rgba(64,150,238,1) 0, rgba(64,150,238,1) 100%), rgba(255,255,255,0.9);
  background: radial-gradient( 50% 50% , circle closest-side, rgba(25,119,196,1) 0, rgba(25,119,196,1) 4%, rgba(12,113,201,1) 77%, rgba(255,255,255,0) 89%, rgba(255,255,255,0) 100%), radial-gradient( 50% 50% , circle closest-side, rgba(0,0,0,0.4) 0, rgba(0,0,0,0.2) 81%, rgba(255,255,255,0) 92%, rgba(255,255,255,0) 100%), radial-gradient( 50% 50% , ellipse closest-side, rgba(64,150,238,1) 0, rgba(64,150,238,1)...