2 box boxes side by side with 50% width and 100% height, up to 100% fill the entire width when hovering over each box
I am trying to have 2 div boxes with 50% width and height 100% .. and in this div box it looks like an anchor where we hover over the 1st box (insert A), Box A will jump from its 50 percent width to full 100 percent width from left to right. And if we were to hover over box B, it would also transion from right to left and fill the width of 100%.
Perhaps the image can explain better .. This is the initial state:
Then, when the mouse hovers over the A field on the left:
Then, when the mouse hovers over the B field to the right:
I'm not sure how to do this with CSS or with javascript / jquery or both? I would appreciate it if someone could help me with this.
Thank:)
source to share
In CSS, you can do something like this:
.container .box_A,
.container .box_B {
width: 50%;
overflow: hidden;
height: 100%;
-webkit-font-smoothing: antialiased;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.container:hover .box_A ,
.container:hover .box_B {
width: 0%;
}
.container:hover .box_A:hover ,
.container:hover .box_B:hover {
width: 100%;
}
For this HTML:
<div class="container">
<div class="box_A"></div>
<div class="box_B"></div>
</div>
source to share
Here is a method using flexbox.
To make the hover effect work on the previous sibling, I changed the order in the HTML. There might be an easier way to do this, but I couldn't hack it.
.container {
display: flex;
height: 200px;
border: 2px solid grey;
overflow: hidden;
box-sizing: border-box;
}
.block {
background: pink;
flex: 1;
margin: 10px;
/* below is styling for demo */
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.b {
order: 2;
}
.block:hover {
min-width: calc(100% - 20px);
}
.block:first-of-type:hover+.block {
display: none;
}
<div class="container">
<div class="block b">B</div>
<div class="block a">A</div>
</div>
source to share
Flexbox can do anything (almost):
* {
box-sizing: border-box;
}
body,html {
margin:0;
height: 100vh;
}
body {
display: flex;
align-items:center;
justify-content: center;
}
.container {
border: 7px solid #999;
height: 200px;
width: 500px;
background-color: lightgreen;
display: flex;
}
.left, .right {
height: 100%;
transition: all 0.5s;
flex: 0 1 50%;
}
.left:hover, .right:hover {
flex: 1 0 100%;
}
.left {
background-color: lightsalmon;
}
.right {
background-color: mediumpurple;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
source to share
with some jquery
$(".a").on("mouseover", function () {
$(".a").css("width" , "100%");
$(".b").css("width" , "0");
});
$(".b").on("mouseover", function () {
$(".b").css("width" , "100%");
$(".a").css("width" , "0");
});
$(".a").on("mouseout", function () {
$(".a").css("width" , "50%");
$(".b").css("width" , "50%");
});
$(".b").on("mouseout", function () {
$(".a").css("width" , "50%");
$(".b").css("width" , "50%");
});
body, html {height:100%; margin:0;}
.a {
background-color:red;
width:50%; height:100%;
float:left;
transition: all .3s;
}
.b {
background-color:blue;
width:50%; height:100%;
float:left;
transition: all .3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="a"></div>
<div class="b"></div>
source to share
You can use CSS like this:
.parent {
border: 2px solid black;
height: 3em;
position: relative;
width: 10em;
}
.left {
background: red;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 50%;
z-index: 1;
transition: width 1s;
}
.left:hover {
width: 100%;
z-index: 2;
transition: width 1s;
}
.right {
background: blue;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 50%;
z-index: 1;
transition: width 1s;
}
.right:hover {
transition: width 1s;
width: 100%;
z-index: 2;
}
Made a fiddle to illustrate the example: Fiddle
source to share
For CSS:
.ParentDiv{
border:1px solid #000;
height:200px;
width:300px;
margin:0 auto;
position: relative;
}
.Box_A {
width:50%;
height:100%;
text-align:center;
left:0;
background: #ff3232;
transition:all 2s ease;
position: absolute;
}
.Box_A:hover {
width:100%;
background: #fff;
z-index: 2;
display:block;
}
.Box_A > a {
display: block;
height: 100%;
}
.Box_B {
width:50%;
height:100%;
text-align:center;
right:0;
background: #ff3232;
transition:all 2s ease;
position: absolute;
border-left:1px solid gray;
}
.Box_B:hover {
width:100%;
background: #fff;
z-index: 2;
display:block;
}
.Box_B > a {
display: block;
height: 100%;
}
<div class="ParentDiv">
<div class="Box_A"><a href="">Box A</a></div>
<div class="Box_B"><a href="">Box B</a></div>
</div>
<!--End ParentDiv-->
source to share
For the following HTML:
<body>
<div class = "left" id = "left">
</div>
<div class = "right" id = "right">
</div>
</body>
CSS
body {
background-color: #ffeead;
}
.left:hover,
.right:hover{
width: 60%;
}
.left:hover ~ #right {
width: 40%;
}
.left {
background-color: #ff6f69;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 50%;
transition: width 1s;
}
.right {
background-color: #ffeead;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
width: 50%;
transition: width 1s;
}
source to share