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
How to Show or Hide/Cover Blog Content With Images Using CSS Step
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!
