ওয়ার্ডপ্রেস ব্লগের থাম্বনেইলের উপর মাউস রাখুন আর উল্টো দিকে ক্যাপশন দেখান

/*Add thumbnail images*/

if ( function_exists( ‘add_theme_support’ ) ) {
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 600, 300, true ); // default Post Thumbnail dimensions (cropped)

// additional image sizes
// delete the next line if you do not need additional image sizes
add_image_size( ‘category-thumb’, 300, 9999 ); //300 pixels wide (and unlimited height)
}

<div class="thumb_area image_thumb">
<div class="thumb_wrap">
<div class="flip_content">
<div class="image_front">
<?php the_post_thumbnail();?>
</div>
<div class="flip_back">
<h3><?php echo get_post(get_post_thumbnail_id())->post_excerpt; ?></h3>
</div>
</div>
</div>
</div>

/*========Flip thumbnail=======*/
.thumb_area {
border:5px solid #333333;
border-radius: 15px;
width: 160px;
height: 150px;
margin: 5px auto;
position: relative;
cursor: default;
}
.thumb_wrap{
position: absolute;
width: 160px;
height: 150px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.flip_content{
display:block;
position: absolute;
width: 160px;
height: 150px;
border-radius: 50%;

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

}

.flip_content > div {
border-radius: 15px;
display: block;
position: absolute;
width: 100%;
height: 100%;
background-position: center center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}

.flip_content .flip_back {
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
-o-transform: rotate3d(0,1,0,180deg);
-ms-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);
background: #000;
}

.image_thumb img{
margin-left:5px;
}

.flip_content h3 {
color: #f00;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
font-size: 14px;
margin: 0 7px;
padding: 40px 0 0 0;
height: 90px;
font-family: ‘Open Sans’, Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}

.thumb_area:hover .flip_content {
-webkit-transform: rotate3d(0,1,0,-180deg);
-moz-transform: rotate3d(0,1,0,-180deg);
-o-transform: rotate3d(0,1,0,-180deg);
-ms-transform: rotate3d(0,1,0,-180deg);
transform: rotate3d(0,1,0,-180deg);
}

<!–[if lte IE 8]><style>
.flip_content .flip_back {display: none;}
</style><![endif]–>