How to Show or Hide Blog Content With Images Using CSS

show or hide content with images
Quality content always plays an important role in Search Engine Optimazation plus with the professional looks of your blog will add more spices and consequently be always be remembered  by your unique vistors. In order to give a long and  lasting  impression to them you should put an images  but not just putting it as you normally do. We will add CSS on it in order to present it as it covers your blog content and it goes sideways upon mouse hover on it. But it doesn't end there, we will hide it as it goes sideways in order to make it more professional as it moves.Feel excited! Follow the steps below.

See first the live demo and have a mouse hover on it to see the classic effect .

How to Show or Hide/Cover Blog Content With Images Using CSS


Step 1. Go to your post and select what particular content do you want to apply this trick  or you may click New post
Step 2. Copy the code below and paste it in your Blogger Post Editor's Page (it must be in HTML Mode)
<div class="cover slide_in">
<div class="right_gate1">
</div>
<div class="left_gate1">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here </div>
Step 3. Publish or Update your post. Now you are halfway done.
Next proceeding steps will put CSS on your Template HTML Editor
Step 5. Go back to Blogger Dashboard and click Template
Step 6. Hit the Edit HTML button
Step 7. Control F or find  the tag below
]]></b:skin>

Step 8. Paste the  CSS code below just above the tag ]]></b:skin>
/**--- Hiding Blog Content With Images Starts here---**/
.cover {
position: relative;
width: 540px;
height: 282px;
margin: 20px auto;
background-color: #eee;
z-index: 1;
padding: 10px;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.slide_in {
overflow: hidden;
}
.left_gate1 {
position: absolute;
background: #DBDCDE;
bottom: 0;
right: 50%;
left: 0;
top: 0;
border: 1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.right_gate1 {
position: absolute;
background: #DBDCDE;
bottom: 0;
left: 50%;
right: 0;
top: 0;
border: 1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.slide_in .right_gate1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8E5HCMciXP0z5y-hvltTSHkMWwSVlaMMITRfWJ_KKdCPVACPdV_JZ280smJ-8QRdGkysR5cgLN57L40IshqYmClycYvzKfcen9-zgSOyg6OUFxu1i-dkqOis8wsls9x0oVJCAqtXyyUko/s1600/hide+image+using+css.png)#DBDCDE;
border: 1px solid #F0F0F0;
}
.slide_in .left_gate1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4oCw11A4coSkqa9PrTEs9sCILu4D9pp4t0D1O38uJOm7CDh34Y8rFdAGZacKT8El14cxHU1xArLJD-cMCIRr_SL89-Gc0grMVettLosOKqA8t9VfBgVHAv4brYI5dQrdOHF0ZxlnUKlcz/s1600/show+image+using+css.png)#DBDCDE;
border: 1px solid #F0F0F0;
}
.cover:hover .right_gate1 {
left: 100%;
right: -50%;
}
.cover:hover .left_gate1 {
right: 100%;
left: -50%;
}
/**--- Hiding Blog Content With Images Ends here---**/

Customization:


  • Just simply change the blue bold text (for the right image) and red bold text (for the left image) bold text with your own image URL
Step 9. Preview and if you're satisfied with the result you may now Save your template.

Enjoy now your new style of putting pictures in blog post.
Happy Blogging Friends!

Also Check:

About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...