css box sliding style on hover

Intoduction :- 
Hii Friends...
Have you ever wanted to use your own style in  your website ?  you create your own stylish div with 3D look. This script will let you do that  Easily.This can possible with the help of css . This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others.So go ahead, CSS form styling is this easy. Now  I am going to put this with Example.

DEMO:- 

Dot Net Modules

Welcome On Asp.net modules. This is my blog and I am Sheetal Khandelwal. It's a css Box with a new creative style. Enjoy.. :) :)

Dot Net Modules

Welcome On Asp.net modules. This is my blog and I am Sheetal Khandelwal. It's a css Box with a new creative style. Enjoy.. :) :)

Example :-
<div class="coat">
    <div class="left_barrier">
    </div>
    <div class="right_barrier">
    </div>
    <h1>
        Dot Net Modules</h1>
    <img style="border:solid 2px rgb(36, 159, 163);" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png">
    <p>
        Welcome On Asp.net modules. This is my blog and I am Sheetal Khandelwal. It's a css Box with a new creative style. Enjoy.. :) :)
    </p>
</div>
<div class="coat slide_in">
    <div class="left_barrier">
    </div>
    <div class="right_barrier">
    </div>
    <h1>
        Dot Net Modules</h1>
    <img style="border:solid 2px rgb(36, 159, 163);" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png">
    <p>
        Welcome On Asp.net modules. This is my blog and I am Sheetal Khandelwal. It's a css Box with a new creative style. Enjoy.. :) :)
    </p>
</div>
<style>
    body
    {
        font-size: 12px;
        font-family: 'Open Sans' , sans-serif;
        color: #4A4A4A;
        text-align: center;
    }
   
    .coat
    {
        position: relative;
        width: 300px;
        height: 310px;
        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);
    }
   
    .left_barrier
    {
        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;
    }
    .coat:hover .left_barrier
    {
        right: 100%;
        left: -50%;
    }
   
    .right_barrier
    {
        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;
    }
    .coat:hover .right_barrier
    {
        left: 100%;
        right: -50%;
    }
   
    .slide_in
    {
        overflow: hidden;
    }
    .slide_in .left_barrier
    {
        background: #DBDCDE;
        border: 1px solid #F0F0F0;
    }
    .slide_in .right_barrier
    {
        background: #DBDCDE;
        border: 1px solid #F0F0F0;
    }
   
    .coat img
    {
        width: 100%;
        margin-top: 15px;
    }
   
    p
    {
        margin-top: 15px;
        text-align: justify;
    }
   
    h1
    {
        font-size: 20px;
        font-weight: bold;
        margin-top: 5px;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    }
</style>