jquery - 2 div boxes side by side with 50% width and 100% height, expanding to 100% fill up the whole width on hover on each box -
i trying have 2 div boxes 50% width each , 100% height.. , within div box, anchor link hover mouse on 1st box (box a), box transition 50% width full 100% width left right. , if hover mouse on over box b, transtion right left , fill width 100%.
maybe picture can explain better.. initial state:
then when mouse hover on box on left:
then when mouse hover on box b on right:
i unsure how css or javascript/jquery or both? appreciate if me this..
thanks :)
on css, can somthing :
.container .box_a, .container .box_b { width: 50%; overflow: hidden; height: 100%; -webkit-font-smoothing: antialiased; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; transition: .3s; } .container:hover .box_a , .container:hover .box_b { width: 0%; } .container:hover .box_a:hover , .container:hover .box_b:hover { width: 100%; }
for html :
<div class="container"> <div class="box_a"></div> <div class="box_b"></div> </div>
Comments
Post a Comment