@import "https://fonts.googleapis.com/css?family=Josefin+Sans:400,700"; body { margin: 0; padding: 0; font-family: "Josefin Sans", sans-serif; background-color: #eee; }

body a { color: #ffffff; text-decoration: none; } .card { position: absolute; top: 50%; left: 50%; height: 600px; width: 450px; transform: translate(-50%, -50%); transform-style: preserve-3d; perspective: 600px; transition: 0.5s; }

.card:hover .card-front { transform: rotateX(-180deg); }

.card:hover .card-back { transform: rotateX(0deg); }

.card-front { height: 100%; width: 100%; background-image: url(foto.jpg); background-position: 50% 50%; background-size: cover; position: absolute; top: 0; left: 0; background-color: #000000; backface-visibility: hidden; transform: rotateX(0deg); transition: 0.5s; }

.card-back { height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: #000000; backface-visibility: hidden; transform: rotateX(180deg); transition: 0.5s; color: #ffffff; text-align: center; }

.card-back h2 { margin: 60% auto 35% auto; font-size: 26px; }

.card-back h2 span { font-size: 20px; }

.card-back a { height: 20px; width: 20px; padding: 5px 5px; border-radius: 4px; line-height: 20px; }

.card-back a:hover { color: #000000; background-color: #fff; }