How To Show Or Hide/Cover Blog Content With Images Using CSS

Quality contents always play a vital role n Search Engine Optimization plus with the professional looks of your blog will add more spices and always be remembered by your unique visitors. 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 it 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 demo

" THE LOVE OF OUR FAMILY "

The greatest love we can show while we are still alive is the love of our family. Like the love of God for us, is the evidence that nothing is as big as our heart when it comes to this kind of feeling.Our family is our stronghold during trials and our comfort zone in times of sufferings. Nevertheless, don't let anything wrong destroy the foundation which you have been constructing for years to insure that every post on it cannot be shaken when earthquake comes nor be carried away in times of typhoon. 

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

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)
Step 3. Publish or Update your post. Now you are halfway done.

Next proceeding steps will put CSS on your Template HTML Editor

Step 4. Go back to Blogger Dashboard and click Template
Step 5. Hit the Edit HTML button
Step 6. Control F or find the tag below

]]></b:skin>

Step 7. Paste the CSS code below just above the tag in step 6

/**--- 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/AVvXsEhuCgAz-YT9X2iI_6AKeA9AsCWEBPMeLbwEHZb094GnsOCUfrRswIeFqSB1Aa6axOixH2KBuoDNML5NxTCsJcY6JyAcIaWgqc2oE0qcfb-xi2_WzmHYt3QKKaZO857HF4HL10B_zYGmv7AF/s1600/hide+image+using+css.png)#DBDCDE;
border: 1px solid #F0F0F0;
}
.slide_in .left_gate1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHyYDcMoRasI8iJuLWq1IJnT0UTgUuqS3QWIpL6RsfjneisZYwHCRwaFRrQF5lXVH6VhcktKM8qIzH9RNbzRHpZNHjiPkD2sQqdl9tM2s8xhEaZYGw7qxMmvDCssuo-NjjMReyz5XBaq0d/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 red bold text (for the right image) and blue bold text (for the left image) bold text with your own image URL

Step 8. 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.

Take care friends!