To make this work I used the Genesis Sandbox Featured Content Widget plugin.
Other (similar) plugins may work but will require code changes. Although this code is mobile responsive you will need to tweak the CSS to make sure the text fits in image boxes. Since requirements vary you will need to make those changes.
I display image on top of each post. (image must first)
Then H2 title followed by
Excerpt wrapped in p tag
Readmore (read more styling is set by theme not this page)
The following jQuery is used to wrap these three elements in a <div class="post-wrapper"></div>
This was the most challenging part getting the jQuery to work properly.
The CSS (below) positions the div (which is created by jQuery), and adds transition effects to post.
<pre>
<script>
jQuery('article.portfolio h2').each(function(){
var $this = jQuery(this);
$this
.add( $this.next() )
.add( $this.next().next() )
.wrapAll('<div class="post-wrapper"><div class="post-inner-wrapper"></div></div>');
});
</script>
<style>
article.portfolio {position:relative; }
article.portfolio .post-wrapper {opacity: 0; transition: all .3s ease-in-out;
position:absolute; top:0px; right:0px; bottom:0px; left:0px; padding:20px;
background:rgba(0,0,0,.3); color:#FFF; }
article.portfolio:hover .post-wrapper {opacity:1;}
article.portfolio img {display:table;}
article.portfolio h2 a {color:#FFF !important;}
article.portfolio .post-inner-wrapper {display:table-cell; vertical-align:middle;}
</style>
</pre>
