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">Step 3. Publish or Update your post. Now you are halfway done.
<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>
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
Enjoy now your new style of putting pictures in blog post.
Happy Blogging Friends!
Also Check:
