Live demo
Flipping postcard

Paris
What an amazing city
Markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_random_image
* @Author web-eau.net
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
?>
<section class="container-post-card">
<div class="post-card">
<figure class="front">
<div class="random-image<?php echo $moduleclass_sfx; ?>">
<?php if ($link) : ?>
<a href="/<?php echo $link; ?>">
<?php endif; ?>
<?php echo JHtml::_('image', $image->folder . '/' . htmlspecialchars($image->name, ENT_COMPAT, 'UTF-8'), htmlspecialchars($image->name, ENT_COMPAT, 'UTF-8'), array('width' => $image->width, 'height' => $image->height)); ?>
<?php if ($link) : ?>
</a>
<?php endif; ?>
</div>
</figure>
<figure class="back">
<div class="start">
<h1 class="post-card__title">Hi Love <i class="fa fa-heart"></i></h1>
<p class="post-card__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sunt maiores quod ad reiciendis voluptatem, vitae ea laboriosam et ipsum architecto ratione delectus, quae dolorum recusandae itaque dolores!
</p>
</div>
<div class="end">
<div class="post-card__head">
<div class="post-stample"></div>
</div>
<span class="adress-line">John Doe</span>
<span class="adress-line">Paris</span>
<span class="adress-line">France</span>
</div>
</figure>
</div>
</section>
CSS
@import url('https://fonts.googleapis.com/css?family=La+Belle+Aurore');
.container-post-card {
width:710px;
height:468px;
position: relative;
perspective: 800px;
}
.post-card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.post-card:hover {
transform: rotateY( 180deg );
}
.post-card figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.post-card .front {
align-items: center;
display: flex;
justify-content: center;
padding: 15px;
}
.post-card .back {
background-image:url(https://mdn.mozillademos.org/files/4151/background.jpg);
display: flex;
padding: 15px;
transform: rotateY( 180deg );
}
.post-card .back .start {
flex: 1;
height: 100%;
}
.post-card .back .end {
flex: 1;
height: 100%;
}
.post-card.flipped {
transform: rotateY( 180deg );
}
.post-card__title {
font-family:'La Belle Aurore';
font-size: 28px;
padding-top: 30px;
}
.post-card__content {
font-family:'La Belle Aurore';
font-size: 25px;
line-height: 1.2;
padding-top: 30px;
}
.post-card__head {
justify-content: flex-end;
display: flex;
}
.post-stample{
margin-bottom: 157px;
}
.adress-line{
display:block;
margin: 5px 80px;
font-family:'La Belle Aurore';
font-size: 28px;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
Inspiration: https://codepen.io/hakilebara/pen/qxPNmJ
Download this override
override-flipping-postcard.zipAlready downloaded 119 times