XYZ CODE: How to add layer effect to your blogger post in 5 minutes

How to add layer effect to your blogger post in 5 minutes

Back>

Example

paste the following code into blogger post's HTML, replace the image urls

<style>
.item {
position: relative;
width: 475px;
height: 400px;
margin: 50px auto;
}

.background {
position: absolute;
z-index: 1;
left: 120px;
display: block;
}

.hover {
height: 0%;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXwGY-2OyNUOBlEXVIihpQHgChj7ZH8_D4OrpqyH0WxqPzrdUbhUEyu6OtZeau5zfzAgjGbqDaq7vpn0zIBClzCdUrXAT_p52MZ1Nu51aYz_zqXPzG1I1l_dqz6MWhISR1nLNNdKOwsdEn/s1600/Screen+Shot+2017-06-13+at+10.57.08+PM.png) no-repeat;
position: absolute;
background-position: 45% 0;
z-index: 2;

-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
width: 100%;
}

.click {
height: 0%;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikIrwrV3Wa0hBiYW83TSs5mgKKa2grC0_yHwC0DZla0ElBorAtZumpaT8bgl7IoTxX2WMmVWneWMWdyJDWPzr34J3S5UA6WTs1DUobyDa4HLHex57dsUcGoR4C7w7lUZ3iugoN885O1cSX/s1600/Screen+Shot+2017-06-13+at+10.51.58+PM.png) no-repeat;
position: absolute;
background-position: 45% 0;
z-index: 2;

-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
width: 100%;
}

.item:hover .hover {
height: 100%;
}

.item:active .click {
height: 100%;
}

.laser {
height: 3px;
width: 100%;
background: #86ff5e;
display: block;
position: absolute;
bottom: -2px;

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

-webkit-box-shadow: 0 0 20px 10px #86ff5e;
-moz-box-shadow: 0 0 20px 10px #86ff5e;
box-shadow: 0 0 20px 10px #86ff5e;

-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
-o-transition: opacity .25s ease;
-ms-transition: opacity .25s ease;
transition: opacity .25s ease;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;

-webkit-transition-delay: .75s;
-moz-transition-delay: .75s;
-o-transition-delay: .75s;
-ms-transition-delay: .75s;
transition-delay: .75s;
}

.claser {
height: 3px;
width: 100%;
background: #01c9ee;
display: block;
position: absolute;
bottom: -2px;

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

-webkit-box-shadow: 0 0 20px 10px #01c9ee;
-moz-box-shadow: 0 0 20px 10px #01c9ee;
box-shadow: 0 0 20px 10px #01c9ee;

-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
-o-transition: opacity .25s ease;
-ms-transition: opacity .25s ease;
transition: opacity .25s ease;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;

-webkit-transition-delay: .75s;
-moz-transition-delay: .75s;
-o-transition-delay: .75s;
-ms-transition-delay: .75s;
transition-delay: .75s;
}

.item:hover .laser {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;

-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}

.item:active.laser {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;

-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}

.item:hover .claser {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;

-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}

.item:active.claser {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;

-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}

</style>

<br />
<div class="item">
<div class="hover">
<div class="laser">
</div>
</div>
<div class="click">
<div class="claser">
</div>
</div>
click the image
<img class="background" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLhZguXnGtPTeO5HgkqzmnwiW8N_GF6eXcBu_dPuJKOeE59SbE2-bJHmMJEAyeUGm9QnPO_usTvwGDW7H3aTx94lXaAPbIEzhrgVdedBXU-WhzoHmvaTBWYZdYIbAn_8hm8sLN3vP7Tsnb/s1600/Screen+Shot+2017-06-15+at+7.34.21+PM.png" />
<br />
<br /></div>