WordPress index content like this site?

1 comment

1. I don’t know of any plugins that can do this automatically, but it shouldn’t be to difficulty to do yourself, if you don’t mind editing your theme. I made an example here

   In the post loop, you can print each post like this:

   <div class="block">
       <?php the_post_thumbnail(); ?>
       <div class="overlay">
           <div class="title"><?php the_title(); ?></div>
           <div class="excerpt"><?php the_excerpt(); ?></div>
           <div class="link">
           <a href="<?php the_permalink(); ?>">Link to full post</a>
           </div>
       </div>
   </div>
   

   And then use CSS link this to position the content over the image, hide it and then show it when you hover over the box:

   .block {
       width: 300px;
       margin: 0 20px 20px 0;
       position: relative;
   }
   
   .block .overlay {
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       background-color: rgba(255,255,255,0.5);
       opacity: 0;
       filter: alpha(opacity=0);
       -webkit-transition: all 0.4s ease-out;
       -moz-transition: all 0.4s ease-out;
       transition: all 0.4s ease-out;
   }
   
   .block:hover .overlay {
       opacity: 1;
       filter: alpha(opacity=100);
   }
   

   Log in to Reply