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>