CSS based open door style hover effect

For Example, CSS based open door style hover effect...

Demo

HTML

<div id="banner">
        <div class="doorHoverLeft"><span class="doorText">WelCome to </span></div>
        <div class="doorHoverRight"><span class="doorText">HTML lion</span></div>
</div>

CSS

<style>
        #banner { 
                background: url(img/library-img.jpg) no-repeat center 0; 
                background-size: cover; 
                height: 500px; 
                border: solid 3px #006baf; 
                text-align: center;
                position: relative;  
                overflow: hidden 
        }
        .doorText { 
                background-color: rgba(253,217,33,0.50); 
                color: #333; 
                font-family: Verdana, sans-serif; 
                font-size: 24px; 
                font-weight: bold; 
                line-height: 45px; 
                height: 45px; 
                border:solid 1px rgba(0,0,0,0.15); 
                border-width:1px 0;
                position: absolute; 
                top: 50%;  
                padding: 0 0 0 20px; 
                left: 1px; 
                right: 1px; 
                margin-top: -22.5px; 
                text-shadow: 0 1px 1px rgba(255,255,255,0.25); 
        }
        .doorHoverLeft { 
                position: absolute; 
                left: 0%; 
                top: 0; 
                bottom: 0; 
                width: 50%; 
                transition: 3s ease-in-out; 
                box-shadow: inset 0 0 0 1px rgba(0,0,0,0.40); 
                background: rgba(226,226,226,0.35); 
                background: -moz-linear-gradient(-45deg, rgba(226,226,226,0.35) 0%, rgba(219,219,219,0.35) 50%, rgba(209,209,209,0.35) 51%, rgba(254,254,254,0.35) 100%); 
                background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(226,226,226,0.35)), color-stop(50%, rgba(219,219,219,0.35)), color-stop(51%, rgba(209,209,209,0.35)), color-stop(100%, rgba(254,254,254,0.35))); 
                background: -webkit-linear-gradient(-45deg, rgba(226,226,226,0.35) 0%, rgba(219,219,219,0.35) 50%, rgba(209,209,209,0.35) 51%, rgba(254,254,254,0.35) 100%); 
                background: -o-linear-gradient(-45deg, rgba(226,226,226,0.35) 0%, rgba(219,219,219,0.35) 50%, rgba(209,209,209,0.35) 51%, rgba(254,254,254,0.35) 100%); 
                background: -ms-linear-gradient(-45deg, rgba(226,226,226,0.35) 0%, rgba(219,219,219,0.35) 50%, rgba(209,209,209,0.35) 51%, rgba(254,254,254,0.35) 100%); 
                background: linear-gradient(135deg, rgba(226,226,226,0.35) 0%, rgba(219,219,219,0.35) 50%, rgba(209,209,209,0.35) 51%, rgba(254,254,254,0.35) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=1 );
        }
        .doorHoverRight { 
                position: absolute; 
                right: 0%; 
                top: 0; 
                bottom: 0; 
                width: 50%; 
                transition: 3s ease-in-out; 
                box-shadow: inset 0 0 0 1px rgba(0,0,0,0.40); 
                background: rgba(226,226,226,0.35); 
                background: -moz-linear-gradient(-45deg, rgba(226,226,226,0.35) 0%, rgba(219,219,219,0.35) 50%, rgba(209,209,209,0.35) 51%, rgba(254,254,254,0.35) 100%); 
                background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(226,226,226,0.35)), color-stop(50%, rgba(219,219,219,0.35)), color-stop(51%, rgba(209,209,209,0.35)), color-stop(100%, rgba(254,254,254,0.35))); 
                background: -webkit-linear-gradient(-45deg, rgba(226,226,226,0.35) 0%, rgba(219,219,219,0.35) 50%, rgba(209,209,209,0.35) 51%, rgba(254,254,254,0.35) 100%); 
                background: -o-linear-gradient(-45deg, rgba(226,226,226,0.35) 0%, rgba(219,219,219,0.35) 50%, rgba(209,209,209,0.35) 51%, rgba(254,254,254,0.35) 100%); 
                background: -ms-linear-gradient(-45deg, rgba(226,226,226,0.35) 0%, rgba(219,219,219,0.35) 50%, rgba(209,209,209,0.35) 51%, rgba(254,254,254,0.35) 100%); 
                background: linear-gradient(135deg, rgba(226,226,226,0.35) 0%, rgba(219,219,219,0.35) 50%, rgba(209,209,209,0.35) 51%, rgba(254,254,254,0.35) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=1 );
        }
        #banner:hover .doorHoverLeft { 
                left: -50%; 
        }
        #banner:hover .doorHoverRight { 
                right: -50%; 
        }
</style>