div#row>.flip{
margin: 10px;
width: 200px;
height: 320px;
float: left; 
cursor: pointer;
}

div.flip>.back {
width: 200px;
height: 320px;
position: absolute;
transform: perspective(600px) rotateY(180deg);
transition: transform 0.5s linear;
background-color: black;
backface-visibility: hidden;
color: white;
font-size: 20px;
text-align:left;
overflow: hidden;
}

div.flip>.front {
position: absolute;
width: 200px;
height: 320px;
transform: perspective(600px) rotateY(0deg);
transition: transform 0.5s linear;
backface-visibility: hidden;
text-align: center;
}

div.front>img  {
width: 200px;
height:320px;
}

.flip:hover>.front {
transform: perspective(600px) rotateY(-180deg);
}
.flip:hover>.back {
transform: perspective(600px) rotateY(0deg);
}