Con amor

 

<div id="border">
<div id="f1_container">
<div id="f1_card" class="shadow">
  <div class="front face">
	<img style="border-radius: 160px; box-shadow: 0px 0px 10px #D8D7DB;"  src="http://mobikcc.com/images/sait/supersbornik52/008fentezi/071.gif"width="260" height="360"/> <!--address to your iamge-->
  </div>
  <div class="back face center">
		<p>Con amor</p> <!--change text here-->
  </div>
	<div id="shine"></div>
</div>
</div>
</div>

CSS 1º opción

#f1_container {
  position: relative;
  margin:auto;
  width: 260px;
  height: 360px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

img{
	border-radius:150px;
}

.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #C0C0C0;
	line-height:250px;
}
#border{
	border:10px solid #fffeee;
	margin:10px auto;
	width:260px;
	height:360px;
	border-radius:160px;	
 	box-shadow: 0px 10px 30px #888888;
}

.back{
	border-radius:150px;
	font-family:courier;
        color: #000;
	font-size:22px;
}
#shine{
	position: absolute;   
    width: 260px;
    height: 360px;   
    z-index: 2;
   background-image:
        -webkit-gradient(
            linear,
            0% 30%,
            50% top,
            color-stop(10%,rgba(255,255,255,0)),
            color-stop(20%,rgba(255,255,255,0)),
            color-stop(70%,rgba(255,255,255,.3)),
            color-stop(90%,rgba(255,255,255,0))),
        -webkit-gradient(
            linear,
            50% 30%,
            100% top,
            color-stop(10%,rgba(224,225,225,0)),
            color-stop(35%,rgba(225,225,225,.3)),
            color-stop(60%,rgba(224,225,225,0)),
            color-stop(80%,rgba(224,225,225,.3)),
            color-stop(20%,rgba(224,225,225,0)));
 border-radius:160px;   
    background-size: 200%;
    background-position: right;
}

CSS 2º  opción

#f1_container {
  position: relative;
  margin:auto;
  width: 260px;
  height: 360px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

img{
	border-radius:150px;
}

.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #E07F44;
	line-height:170px;
}
#border{
	border:10px solid #fffeee;
	margin:10px auto;
	width:260px;
	height:360px;
	border-radius:160px;	
 	box-shadow: 0px 10px 30px #888888;
}
.back{
	border-radius:150px;
	font-family:courier;
    color: #000;
	font-size:22px;
}
#shine{
	position: absolute;   
    width: 260px;
    height: 360px;   
    z-index: 2;
	  background-image:
      
        -webkit-gradient(
            linear,
            0% 30%,
            50% top,
            color-stop(10%,rgba(243,200,143,0)),
            color-stop(20%,rgba(243,200,143,0)),
            color-stop(70%,rgba(243,200,143,.3)),
            color-stop(90%,rgba(243,200,143,0))),
      
        -webkit-gradient(
            linear,
            50% 30%,
            100% top,
            color-stop(10%,rgba(227,151,78,0)),
            color-stop(35%,rgba(227,151,78,.3)),
            color-stop(60%,rgba(227,151,78,0)),
            color-stop(80%,rgba(227,151,78,.3)),
            color-stop(20%,rgba(227,151,78,0)));
 border-radius:160px;   
 background-size: 200%;
 background-position: right;
}