How to Show or Hide Blog Content With Images Using CSS

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(http://1.bp.blogspot.com/-kWgW71XVQ0E/UiCk5acur8I/AAAAAAAABsY/Fo_oucRARTw/s1600/hide+image+using+css.png)#DBDCDE;
border: 1px solid #F0F0F0;
}
.slide_in .left_gate1 {
background: url(http://3.bp.blogspot.com/-gKdeozSvTVU/UiClhKm4wMI/AAAAAAAABsg/eOn8Ygi_lAc/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:

• How to Upload image Link in Blogger and get the Image Link on it
• How to add alt Tag to your Images, Increase Blog Traffic!

About the Author:

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