In our WordPress blog homepage periodically, we are seeing our all post shortly. Almost all of these posts we would like to display thumbnails. In the post thumbnail image, you can display the text by using caption. See our work project below..
When you mouse over the image that rose above example reverse the image of the rose and the caption of the image as a show WOW! BEAUTIFUL FLOWER. If you want to add this project in your post just follow my instruction.
Important: In order to try to project, you must be concept about html,css and WordPress Development.
Step-1:
Open your index.php file.
Step-2:
Find following code.<?php the_post_thumbnail>();?>
Now delete above the code and paste the following code. It may take some css and html editing, use your experience.
<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>
Step-3:
Now at the bottom of your theme's style.css file to add the following code./*========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,
border: 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);
}
This effect will not work on Internet Explorer. So open your header.php file and between the <head></head> tags add the following code.
<!–[if lte IE 8]><style>
.flip_content .flip_back {display: none;}
</style><![endif]–>
Then it will be completed project.
Remember: When you add an image as a thumbnails, then must be add caption.
Jillur Rahman
I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.
Thanks a lot for your important tutorial.
ReplyDeleteThank you for this tutorial. I'm trying to look for codes on HTML newsletter. I'm not an expert so I will really need some help about this if possible.
ReplyDeletehttp://www.hirewordpressdeveloper.org/html-newsletter/
Hey, nice site you have here! Keep up the excellent work!
ReplyDeleteWordpress Developer
Useful concept about html,css and WordPress Development. Thanks nice work
ReplyDeletewordpress developer