JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<script src="http://www.queness.com/resources/html/caption/js/jquery.easing.1.3.js"></script>
<div class="home">
    <div id="content">
        <article id="post-65" class="post-65 post type-post status-publish format-standard hentry category-collages category-my-work tag-2011 tag-collage">
            <header class="entry-header">
                <h1 class="entry-title"><a href="http://localhost:8888/crary_wordpress/?p=65" title="Permalink to Linked 6" rel="bookmark">Linked 6</a></h1>
                <div class="entry-meta">
                    <span class="meta-prep meta-prep-author">Posted on </span><a href="http://localhost:8888/crary_wordpress/?p=65" rel="bookmark"><time class="entry-date" datetime="2012-12-10T03:43:59+00:00" pubdate="">December 10, 2012</time></a> <span class="meta-sep"> by </span> <span class="author vcard"><a class="url fn n" href="http://localhost:8888/crary_wordpress/?author=1" title="View all posts by admin">admin</a></span>        </div><!-- .entry-meta -->
    </header><!-- .entry-header -->

        <div class="entry-content">
        <p><a href="http://localhost:8888/crary_wordpress/wp-content/uploads/2012/12/co_linked6.jpg"><img class="alignnone size-full wp-image-66" title="linked 6" src="http://localhost:8888/crary_wordpress/wp-content/uploads/2012/12/co_linked6.jpg" alt="2011 Woodcut on Mylar Collage 23&quot; x 23&quot;" width="520" height="600"></a></p>
            </div><!-- .entry-content -->
    
    <footer class="entry-meta">
        <span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links">Posted in </span><a href="http://localhost:8888/crary_wordpress/?cat=1" title="View all posts in Collages" rel="category">Collages</a>, <a href="http://localhost:8888/crary_wordpress/?cat=15" title="View all posts in My Work" rel="category">My Work</a></span>
        <span class="meta-sep"> | </span>
        <span class="tag-links">Tagged </span><a href="http://localhost:8888/crary_wordpress/?tag=2011"...

CSS

*{
 font-family:Sans-serif;   
}
/*-------------*\
Home Content
\*-------------*/
.home #content {
width:100%;
}
/*container*/
.home article.post {
width: 28%;
float: left;
clear: none !important;
position:relative;
overflow:hidden;
}
/*objects hidden in container*/
.home header.entry-header,.home footer.entry-meta {
position:absolute;
background:#000;
height:50px;
width:100%;
opacity:0.6;
filter:alpha(opacity=60);  
-moz-opacity:0.6;    
-khtml-opacity: 0.6;    
}
/*position to hide them*/
.home header.entry-header {
top:-50px;
}
.home footer.entry-meta {
bottom:-50px;
}
/* styling of the hidden content*/
.home header.entry-header {
display:block;
}
.home footer.entry-meta {
display:block;
}
/* styling image inside of .entry-content 
.entry-content img {
 width:100%;   
}
*/

JavaScript

//wp animate posts titles - portfolio press arrangement // only works w/ mamp runnning
//needs JQ & JQ easing js
//
// transition effect
        style = 'easeOutQuart';

        // if the mouse hover the image
        $('.home article.post').hover(function() {
                //display heading and caption
            $('.home header.entry-header').stop(false,true).animate({top:0},{duration:200, easing: style});
                $('.home footer.entry-meta').stop(false,true).animate({bottom:0},{duration:200, easing: style});
            },

            function() {
                //hide heading and caption
                $('.home header.entry-header').stop(false,true).animate({top:-50},{duration:200, easing: style});
                $('.home footer.entry-meta').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
            }
        );