JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="portfolio-img">
<a href="images/portfolio-big.jpg"><img src="images/thumbnail.jpg"/></a>
<p class="portfolio-excerpt">They say the only thing better.</p>
<p class="portfolio-text">Lorem ipsum</p>
</div>
CSS
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
p.portfolio-text{
display:none;
}
p.portfolio-excerpt{
display:block;
height:30px;
width:auto;
}
p.portfolio-hover{
display:block;
}
JavaScript
$(document).ready(function(){
$('.portfolio-excerpt').hover(function(){
$('.portfolio-text').addClass('portfolio-hover')
},
function(){
$('.portfolio-text').removeClass('portfolio-hover')
}
)
}
)