Awesome And Stylish CSS3 Door Opener DIV For Data

Do you want to hide your important data in an awesome and stylish div that will show your data on hover to user like a door opening then here we have an awesome widget fpr you on this concept.

Check out out Awesome And Stylish Pure CSS3 Door Opener DIV For Data like image and text etc to add your data and show the data on hover so see our live DEMO below then garb the code from below and go for it.

Features:

1.) No JQuery File Added.
2.) No JavaScript Code Added.
3.) CSS3 Added.
4.) Simple And Fast Loading Widget.
5.) Can Work With Any Browser.

How To Add In A WebPage OR Blog?

1.) Just Go To Your “Web Page File” or “Blog”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.

CSS:

<style>
.cover {
position: relative;
width: 600px;
height: 400px;
margin: 20px auto;
background-color: #f7f7f7;
z-index: 1;
-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);
}
.left_gate{
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;
}
.cover:hover .left_gate{
right: 100%;
left: -50%;
}
.right_gate{
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;
}
.cover:hover .right_gate{
left: 100%;
right: -50%;
}
.slide_in {
overflow: hidden;
}
.slide_in .left_gate {
background: url(https://lh3.googleusercontent.com/-77t-b2N31BI/V1kx7DIeSFI/AAAAAAAAizc/raHADLdH6_oHEx6lmGM0YhC3qvc8tsO9ACCo/s400/LeftGate.jpg)#DBDCDE;
border:1px solid #F0F0F0;
}
.slide_in .right_gate {
background: url(https://lh3.googleusercontent.com/-X6jYUEG4T7M/V1kx7ErDxqI/AAAAAAAAizg/DvqPRq8-ekotHIepdAb6YmFviD3OVBTrwCCo/s400/RightGate.jpg)#DBDCDE;
border:1px solid #F0F0F0;
}
.cover img {
margin-top: 15px;
}
</style>

HTML:

<div class="GateOpener">
<div class="cover slide_in">
<div class="left_gate"></div>
<div class="right_gate"></div>
YOUR CONTENT TEXT GOES HERE
</div>

Customization:

1.) You can change the Codes if your are a Pro. Also change “YOUR CONTENT TEXT GOES HERE” with your data. Rest can ask for customization.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…