NewLuckyProgramer NewLuckyProgramer - 2 months ago 20
CSS Question

Make anchor stay on screen

I have 4 anchors displayed on screen:

I have 4 anchors displayed on screen

After Hover anchors enlarge and they push the last div out of the screen:

After Hover anchors enlarge and they push the last div out of the screen.



#box1{
height: 100%;
width: 25%;
background-color: black;
transition: all 500ms ease-in-out;

}

#box1:hover{
height: 100%;
width: 30%;
left:-5%;

}

#box2{
height: 100%;
width: 25%;
background-color: green;
transition: all 500ms ease-in-out;

}

#box2:hover{
height: 100%;
width: 30%;
left:-5%;
}


#box3{
height: 100%;
width: 25%;
background-color: blue;





transition: 500ms ;

}

#box3:hover{
width: 30%;
height: 100%;
left:-5%;


}
#box4{
height: 100%;
width: 25%;
background-color: darkviolet;


}

#box4:hover{
height: 100%;
width: 30%;
left:-5%;
float: right;
}

.box {
float: left;

}

.boxdiv{
height: 100%;
width: 100%;
position:fixed;
}

<div class="boxdiv">
<a id="box1" class="box" >
<div>

</div>
</a>
<a id="box2" class="box">
<div>

</div>
</a>
<a id="box3" class="box">

</a>
<a id="box4" class="box">
<div>

</div>
</a>
</div>





How do I make the anchors enlarge and the last anchor stay on the screen? I want the anchors to Enlarge but the purple anchor to also stay in the view.

Answer

Flexbox can do that.

* {
  margin: 0;
  padding: 0;
}
.red {
  background: #f00;
}
.green {
  background: #0f0;
}
.blue {
  background: #00f;
}
.orange {
  background: orange;
}
div {
  height: 150px;
  display: flex;
}
.parent a {
  flex: 1 1 25%;
  transition: flex-basis .5s ease;
}
.parent a:hover {
  flex: 1 0 30%;
}
<div class="parent">
  <a href="#1" class="box red"></a>
  <a href="#2" class="box blue"></a>
  <a href="#3" class="box green"></a>
  <a href="#4" class="box orange"></a>
</div>

Comments