How to Design your Wordpress Blog Post Thumbnail
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.
Categories:
WordPress Designs
0 nhận xét:
Đăng nhận xét