usHIF
A Pen by A Non Ymous on CodePen.
<div id="post-<?php the_ID(); ?>" class="post-flyout"> | |
<div class="post-flyout_thumb"><?php echo $thumb; ?></div> | |
<div class="post-flyout_content"> | |
<h3 class="post-flyout_title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h3> | |
<p class="post-flyout_byline">By <?php the_author(); ?> on <?php the_date(); ?></p> | |
<p class="post-flyout_desc"><?php the_excerpt(); ?></p> | |
</div> | |
</div><!-- #post-<?php the_ID(); ?> --> |
div.posts-by-tag-item.Buzz:hover div.post-flyout { | |
display: block; | |
} | |
.post-flyout { | |
width:100%; | |
max-width:500px; | |
display: none; | |
position: absolute; | |
left: 380px; | |
bottom: 1px; | |
padding: 10px; | |
border: none; | |
background: #333; | |
z-index: 999; | |
color: #fff; | |
} | |
.post-flyout_thumb { | |
float:left; | |
max-width:100px; | |
height:auto; | |
} | |
.post-flyout_content { | |
float:left; | |
margin-left:15px; | |
} | |
.post-flyout_title { | |
font-family:'Oswald', sans-serif; | |
font-size: 14px; | |
color:#fff; | |
} | |
.post-flyout_byline { | |
font-size:12px; | |
} | |
.post-flyout_desc { | |
font-size:12px; | |
} |
A Pen by A Non Ymous on CodePen.