• HTML
• CSS

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

<div class=" card">
    <div class="face front">
        <img src="mancora_peru.png" alt="">
        <h3>Mancora</h3>
    </div>
    <div class="face back">
        <div class="details">
            <h2>Mancora - Perú</h2>
            <div class="social">
                <a href="#"><i class="fab fa-facebook-f"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-youtube"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
            </div>
        </div>
    </div>
</div>

CSS

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:sans-serif;
}
body{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    background:rgb(34,193,195);
}
.card{
    position:relative;
    width:350px;
    height:250px;
}
.card .face{
    position:absolute;
    width:100%;
    height:100%;
    backface-visibility:hidden;
    border-radius:7px;
    overflow:hidden;
    transition:.5s;
}
.card .front{
    transform:perspective(600px) rotateX(0deg);
    box-shadow:0 5px 10px rgba(0,0,0,0.5);
}
.card .front img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
}
.card .front h3{
    position:absolute;
    bottom:0;
    width:100%;
    height:45px;
    line-height:45px;
    color:#fff;
    background:rgba(0,0,0,.4);
    text-align:center;
}
.card .back{
    transform:perspective(600px) rotateX(180deg);
    background:rgb(3,35,54);
}
.card .back .details{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    height:100%;
    color:#fff;
}
.card .back .details .social a{
    display:inline-block;
    margin:10px 5px;
}
.card .back .details .social i{
    transition:0.3s;
    color:#5d6d7e;
}
.card .back .details .social i:hover{
    color:#fff;
}
.card:hover .front{
    transform:perspective(600px) rotateX(180deg);
}
.card:hover .back{
    transform:perspective(600px) rotateX(360deg);
}