JSFiddle - React, Tailwind, and code Playground

by Matthias Kittsteiner

HTML

<div class="tree">
		<a href="/Royal-Empress-Tree.htm">
		<div class="info showLittle">
			<h4><div class="rank">1</div> Empress Tree <i class="fa fa-bars"></i></h4>
			<p class="bo_name"><em>(paulownia)</em></p>
			<p class="notes">Fragrant, colorful blooms. Valuable timber. Very unique tree.</p>
			<div class="info_table">
				<div class="header">Growth per Year</div>
				<div class="header head_center">Height in 3 Years</div>
				<div class="header">Mature Height</div>
				<div style="clear:both"></div>
				<div class="details">10 - 15 ft.</div>
				<div class="details head_center">30 - 50 ft.</div>
				<div class="details">40 - 50 ft.</div>
			</div>
		</div>
		<img src="http://mckinleyarborists.com/wp-content/uploads/2013/04/empress-tree.jpg" alt=""/>
		</a>
	</div>

CSS

div {
		font-family: calibri, sans-serif;
		color: #343434;
		font-size: 11px;
	}
	
	.fast_trees_wrapper {
		width: 960px;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
	}
	
	.tree {
		position: relative;
		float: left;
		width: 300px;
		height: 300px;
		overflow: hidden;
		margin: 10px 10px;
	}
	
	.tree a {
		width: 100%;
		height: 100%;
		display: block;
	}
	
	.info {
		width: 100%;
		position: absolute;				
		background: rgba(255,255,255,0.85);
	}
	
	.info h4 {
		padding: 0;
		margin: 5px auto;
		font-size: 20px;
		text-align: center;
		text-shadow: 0 1px #fff;
	}
	
	.notes {
		padding: 0 5px;
		text-align: center;
		font-size: 13px;
	}
	
	.tree img {
		width: 100%;
		height: auto;
		display: block;
		backface-visibility: hidden;
	}
	
	.info_table {
		width: 100%;
	}
	
	.header {
		float: left;
		width: 31.5%;
		text-align: center;
		font-weight: bold;
		font-size: 10px;
		padding: 2px;
	}
	
	.head_center {
		border-left: 1px solid #aaa;
		border-right: 1px solid #aaa;
	}
	
	.details {
		float: left;
		width: 31.5%;
		text-align: center;
		padding: 2px;
	}
	
	.info i {
		position: absolute;
		right: 10px;
		top: 8px;
		color: #aaa;
		font-size: 20px;
		text-shadow: 0 1px #fff;
	}
	
	.rank {
		position: absolute;
		left: 10px;
		top: 8px;
		
	    border-radius: 50%;
	    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
	
	    width: 13px;
	    height: 13px;
	    padding: 2px;
	
	    background: #fff;
	    border: 1px solid #666;
	    color: #666;
	    text-align: center;
	    text-shadow: 0 1px #fff;
	}
	
	.bo_name {
		text-align: center;
		padding:0;
		margin:0;
		color: #666;
	    text-shadow: 0 1px #fff;
	}
	
	.showAll {
		bottom: 0 !important;
	}
	

.info {
    transition: all .2s;
}

JavaScript

function toggleInfo(item) {
		$(item).find('.info').toggleClass('showLittle showAll');
	}
	
	$(function() {
		
		$('.tree a').mouseover(function() {
			toggleInfo(this);
		}).mouseout(function(){
			toggleInfo(this);
		});
        
		var elementHeight = -($('.info').height() - 34);
        console.log(elementHeight);
        $('.showLittle').css('bottom', elementHeight);
	});