i have below code description box slides out when hover on image. i'm trying change requirements when move mouse away description box disappears instead of sliding underneath image. can suggest need make change , css should add/insert? in advance
<style> .imagepluscontainer{ /* main image container */ position: relative; z-index: 1; } .imagepluscontainer img{ /* css image within container */ position: relative; z-index: 2; -moz-transition: 0.5s ease; /* enable css3 transition on props */ -webkit-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } .imagepluscontainer:hover img{ /* css image when mouse hovers on main container */ -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); -moz-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } .imagepluscontainer div.desc{ /* css desc div of each image. */ position: absolute; width: 90%; z-index: 1; /* set z-index less image's, it's hidden beneath */ bottom: 0; /* default position of desc div bottom of container, setting slide down */ left: 5px; padding: 8px; background: rgba(0, 0, 0, 0.8); /* black bg 80% opacity */ color: white; -moz-border-radius: 0 0 8px 8px; /* css3 rounded borders */ -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; opacity: 0; /* set initial opacity 0 */ -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* css3 shadows */ -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); -moz-transition: 0.5s ease 0.5s; /* enable css3 transition on desc div. final 0.5s value delay before animation starts */ -webkit-transition: 0.5s ease 0.5s; -o-transition: 0.5s ease 0.5s; -ms-transition: 0.5s ease 0.5s; transition: 0.5s ease 0.5s; } .imagepluscontainer div.desc a{ color: white; } .imagepluscontainer:hover div.desc{ /* css desc div when mouse hovers on main container */ -moz-transform: translate(0, 100%); -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -o-transform: translate(0, 100%); transform: translate(0, 100%); opacity:1; /* reveal desc div */ } /*### below css when applied desc div slides desc div right edge of image ###*/ .imagepluscontainer div.rightslide{ width: 150px; /* reset default */ top:15px; right:0; left:auto; /* reset default */ bottom:auto; /* reset default */ padding-left:15px; -moz-border-radius: 0 8px 8px 0; -webkit-border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0; } .imagepluscontainer:hover div.rightslide{ -moz-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -o-transform: translate(100%, 0); transform: translate(100%, 0); } /*### below css when applied desc div slides desc div left edge of image ###*/ .imagepluscontainer div.leftslide{ width: 150px; /* reset default */ top:15px; left:0; bottom:auto; /* reset default */ padding-left:15px; -moz-border-radius: 8px 0 0 8px; -webkit-border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px; } .imagepluscontainer:hover div.leftslide{ -moz-transform: translate(-100%, 0); -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform:translate(-100%, 0); } /*### below css when applied desc div slides desc div top edge of image ###*/ .imagepluscontainer div.upslide{ top:0; bottom:auto; /* reset default */ padding-bottom:10px; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; } .imagepluscontainer:hover div.upslide{ -moz-transform: translate(0, -100%); -webkit-transform: translate(0, -100%); -ms-transform: translate(0, -100%); -o-transform: translate(0, -100%); transform:translate(0, -100%); } </style><!-- make sure each container contains explicit width/height attrs reflect dimensions of showcased image--> <div class="imagepluscontainer" style="width:263px; height:199px; z-index:2"> <img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" /> <div class="desc"> capable of seating 50,000 spectators, <a href="http://en.wikipedia.org/wiki/colosseum">colosseum</a> used gladiatorial contests , public spectacles such executions. </div> </div> <br /> <div class="imagepluscontainer" style="width:263px; height:199px; left:350px"> <img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" /> <div class="desc rightslide"> capable of seating 50,000 spectators, <a href="http://en.wikipedia.org/wiki/colosseum">colosseum</a> used gladiatorial contests , public spectacles such executions. </div> </div> <br /> <div class="imagepluscontainer" style="width:263px; height:199px"> <img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" /> <div class="desc upslide"> capable of seating 50,000 spectators, <a href="http://en.wikipedia.org/wiki/colosseum">colosseum</a> used gladiatorial contests , public spectacles such executions. </div> </div> <br /> <div class="imagepluscontainer" style="width:263px; height:199px; left:350px"> <img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" /> <div class="desc leftslide"> capable of seating 50,000 spectators, <a href="http://en.wikipedia.org/wiki/colosseum">colosseum</a> used gladiatorial contests , public spectacles such executions. </div> </div>
Comments
Post a Comment