WordPress Post Image to Headline Hover Effect with jQuery and CSS

<!--HTML-->

<div class="viewport"> <a href="http://orkbet.com"> <span class="dark-background">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span> <img src="http://orkbet.com/image.jpg" alt="Northern Saw-Whet Owl" /> </a> </div>



<!--CSS-->

.viewport { border: 3px solid #eee; float: left; height: 299px; margin: 0 9px 9px 0; overflow: hidden; position: relative; width: 450px; } .no-margin { margin-right: 0; } .viewport a { display: block; position: relative; } .viewport a img { height: 332px; left: -20px; position: relative; top: -20px; width: 500px; } .viewport a span { display: none; font-size: 3.0em; font-weight: bold; height: 100%; padding-top: 120px; position: absolute; text-align: center; text-decoration: none; width: 100%; z-index: 100; } .viewport a span em { display: block; font-size: 0.45em; font-weight: normal; } .dark-background { background-color: rgba(15, 15, 15, 0.6); color: #fff; text-shadow: #000 0px 0px 20px; } .dark-background em { color: #ccc; }


<!--JS-->

<script type="text/javascript">

$(document).ready(function() {

$('.viewport').mouseenter(function(e) { $(this).children('a').children('img').animate({ height: '299', left: '0', top: '0', width: '450'}, 100); $(this).children('a').children('span').fadeIn(200); }).mouseleave(function(e) { $(this).children('a').children('img').animate({ height: '332', left: '-20', top: '-20', width: '500'}, 100); $(this).children('a').children('span').fadeOut(200); });});

</script>