JSFiddle - React, Tailwind, and code Playground

by Rozina Szogyenyi

HTML

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

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


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

      <div class="postcard-title--content">
        <h2 class="postcard-title">Saint Petersburg <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>

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

          <div class="postcard-badge--hidden" data-reveal="airport">
            Airport closest to San Francisco: San Francisco International Airport
          </div>

          <div class="postcard-badge--hidden" data-reveal="price-increase">
            Prices in San Francisco have increased for your dates since yesterday.  Book now to get today’s best offer!
          </div>

          <div class="postcard-badge--hidden" data-reveal="price-decrease">
            Prices in San Francisco for your dates are the lowest we've seen in 40 days!
          </div>

          <div class="postcard-badge--hidden" data-reveal="endorsements">
            Saint Petersburg was highly rated for museums by 59 guests from the Netherlands!
          </div>

          <div class="postcard-badge--hidden" data-reveal="searched">
            You've searched for San Francisco and Las Vegas, so we think you might also like this city.
          </div>

        </div>

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

      </div>

    </div>

    <div class="postcard-badges--icons">
      <span class="postcard-badges--icon icon-searched js-icon" data-reveal="searched"><img src="http://iconsdb.com/icons/preview/white/contacts-xl.png" /></span>
      <span class="postcard-badges--icon icon-aiport js-icon"...

CSS

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

.postcard-wrapper {
	width: 600px;
	height: 280px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -150px;
	margin-left: -300px;
	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: -48px;
	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-wrapper:hover .postcard-title--shadow {
	bottom: 0;
}

.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;
	text-align: right;
}
.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;
	font-weight: 300;
}

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

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

.postcard-badges--icons {
	width: 31px;
	position: absolute;
	right: 15px;
	top: 15px;
}
.postcard-badges--icon {
	display: inline;
	border-radius: 3px;
	cursor: pointer;
	line-height: 100%;
	display: block;
	text-align: center;
	margin-bottom: 5px;
}

.postcard-badges--icon img...

JavaScript

var icon = $('.js-icon'); 
  console.log(icon);
	var content = $('.js-content-to-reveal');

	$(icon).mouseover(function(){

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

	}).mouseout(function(){

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

	});