On :hover next element slides into view. Sliding is done with CSS Transitions. Only JS used is to add remove classes on mouseenter and mouseleave.
A Pen by Hubert Iwaniuk on CodePen.
<div class="container"> | |
<div class="panel">Center</div> | |
<div class="panel right">Right</div> | |
</div> |
var container = document.querySelector(".container"), | |
center = document.querySelector(".panel"), | |
right = document.querySelector(".right"); | |
container.addEventListener("mouseenter", function (x) { | |
right.classList.remove("right"); | |
center.classList.add("left"); | |
}); | |
container.addEventListener("mouseleave", function (x) { | |
center.classList.remove("left"); | |
right.classList.add("right"); | |
}); |
On :hover next element slides into view. Sliding is done with CSS Transitions. Only JS used is to add remove classes on mouseenter and mouseleave.
A Pen by Hubert Iwaniuk on CodePen.
* { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.container { | |
position: relative; | |
width: 35em; | |
height: 20em; | |
background-color: lightgreen; | |
overflow-x: hidden; | |
border: solid darkgreen; | |
} | |
.panel { | |
width: 100%; | |
height: 100%; | |
background-color: lightblue; | |
border: solid darkblue; | |
position: absolute; | |
left: 0px; | |
top: 0px; | |
transition: left 1s; | |
text-align: center; | |
font-size: 2em; | |
} | |
.left { | |
position: absolute; | |
left: -100%; | |
top: 0px; | |
transition: left 1s; | |
background-color: lightgray; | |
border: solid darkgray: ; | |
} | |
.right { | |
position: absolute; | |
left: 100%; | |
top: 0px; | |
transition: left 1s; | |
background-color: lightgray; | |
border: solid darkgray: ; | |
} |