JSFiddle - React, Tailwind, and code Playground

by Rozina Szogyenyi

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="container">
	<section class="postcard-wrapper js-postcard--wrapper">
		

		<div class="postcard-image" style="background-image: url('http://bstatic.com/images/city/840x280/285/28578.jpg')">


			<div class="postcard-title--shadow">

				<div class="postcard-title--content">
					<h2 class="postcard-title">San Francisco <img class="postcard-title--flag" src="http://r-ec.bstatic.com/static/img/flags/24/us.png" /></h2>
					<p class="postcard-properties">306 properties</p>

					<p class="postcard-button--container">
						<a href="#" class="postcard-button">Find somewhere to stay</a>
					</p>
				</div>

				<div class="postcard-badges--content js-content-to-reveal">


					<div class="postcard-badge--hidden" data-reveal="airport">
						<span class="postcard-badges--icon icon-inline icon-aiport"><img src="http://iconsdb.com/icons/preview/white/airplane-3-xxl.png" /></span>
						<span>Closest airport: San Francisco International Airport</span>
					</div>

					<div class="postcard-badge--hidden" data-reveal="price-decrease">
						<span class="postcard-badges--icon icon-inline icon-pricedecrease"><img src="http://iconsdb.com/icons/preview/white/arrow-203-xl.png" /></span>
						<span>Prices in San Francisco for your dates are the lowest we've seen in 40 days!</span>
					</div>

					<div class="postcard-badge--hidden" data-reveal="endorsements">
						<span class="postcard-badges--icon icon-inline icon-endorsement"><img src="http://www.iconsdb.com/icons/preview/white/shellfish-xl.png" /></span>
						<span>Highly rated for seafood by 59 guests from the Netherlands!</span>
					</div>

					<div class="postcard-badge--hidden js-default show" data-reveal="searched">
						<span class="postcard-badges--icon icon-inline icon-searched"><img src="http://iconsdb.com/icons/preview/white/contacts-xl.png" /></span>
						<span>Still planning a trip to this...

CSS

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: 'Helvetica Neue';
	color: #003580;
}

.container {
	min-width: 400px;
	max-width: 600px;
	margin: 20px auto;
}

.postcard-wrapper {
	margin-bottom: 25px;
	height: 280px;
	background: #e2edf9;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.07);
	overflow: hidden;
}

.postcard-image { 
	height: 280px;
	background-size: cover;
	background-position: center center;
	position: relative;
}

.postcard-title--shadow {
	position: absolute;
	bottom: 0;
	transition: all .3s ease-in-out;
	left: 0;
	width: 100%;
	background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(23,79,147,0.8) 72px,rgba(0,53,128,0.8) 100%);
}



.postcard-title--content {
	padding: 15px;
}

.postcard-title {
	font-weight: normal;
	margin: 0;
	line-height: 24px;
	font-size: 24px;
	color: #FFF;
	font-weight: 300;
}

img.postcard-title--flag {
	vertical-align: middle;
}

.postcard-properties {
	padding: 0;
	margin: 0;
	color: #e2edf9;
	font-size: 14px;
}

.postcard-button--container {
	padding: 0;
	margin: 0;
	height: 0;
	overflow: hidden;
	transition: all .3s ease-in-out;
	text-align: right;
}

.postcard-wrapper:hover .postcard-button--container {
	height: 50px;

}

.postcard-button {
	margin-top: 15px;
	display: inline-block;
	background: #0896ff;
	color: #FFF;
	text-decoration: none;
	border: 1px solid #0896ff;
	font-size: 14px;
	padding: 8px 16px;
	border-radius: 3px;
}

.postcard-button:hover {
	border-color: #FFF;
}

.postcard-badges--content {
	color: #FFF;
	font-size: 13px;
	height: 50px;
	font-weight: 300;
	background: #000;
	background: rgba(0,0,0, 0.3);
}

.postcard-badge--hidden {
	height: 0px;
	padding: 0 15px;
	overflow: hidden;
	transition: all .3s ease-in-out;
}

.postcard-badge--hidden.show {
	height: 50px;
	padding-top: 15px;
}

.postcard-badges--icons {
	width: 31px;
	position: absolute;
	right: 15px;
	top: 15px;
}
.postcard-badges--icon {
	border-radius: 3px;
	cursor: pointer;
	line-height:...

JavaScript

var icon = $('.js-icon'); 
	var defaultItem = $('.js-default');
	var content = $('.js-content-to-reveal');

	$(icon).mouseover(function(){

		var reveal = $(this).data('reveal');
		var parentContainer = $(this).parents('.js-postcard--wrapper');

		var find = parentContainer.find('[data-reveal="'+reveal+'"]');
		find.addClass('show');

	}).mouseout(function(){

		var reveal = $(this).data('reveal');
		var find = $(content).find('[data-reveal="'+reveal+'"]');
		find.removeClass('show');

		defaultItem.addClass('show');

	});