Live demo

Flipping postcard

 

Hi Love

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!

John Doe Paris France

 

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); }
}

A PROPOS DE L'AUTEUR :

Webmaster freelance passionné par Joomla depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Daniel est également très impliqué dans la communauté Joomla depuis 2014 en étant membre actif de plusieurs projets, conférencier et fondateur du JUG Breizh.