JSFiddle - React, Tailwind, and code Playground

by Cristofer Sousa

HTML

<?php
/**
 * página destinada a mostrar o conteudo resumido na index
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class('col-md-4 col-sm-4 pbox hoverzoom'); ?>

		<?php
			$thumb = get_post_thumbnail_id();
			$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
			//$image = aq_resize( $img_url, 720, 560, true ); //resize & crop the image
			$image = aq_resize( $img_url, 350, 200, true ); //resize & crop the image
		?>
			
		<?php if($image) : ?>
		<a href="<?php the_permalink(); ?>"> <img class="img-responsive" src="http://www.tutorialwebdesign.com.br/wp-content/uploads/2014/07/tigre.jpg"/></a>
		<?php endif; ?>	
		
		
		<h2 class="box-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
		<div class="box-meta categoria"><?php the_category(',');?></div>
		<div class="post-title"><?php resumo();?></div>	
</article><!-- #post-## -->

CSS

.hoverzoom {
    position: relative; 
    width:100px;
    overflow: hidden;
}
.hoverzoom > a > img  {
   width: 100%; 
    border-radius: 2px;
    -webkit-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
        -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
         -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
          -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
             transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
}
.hoverzoom:hover > a > img {
    -webkit-transform: scale(1.5);
       -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
         -o-transform: scale(1.5);
            transform: scale(1.5);