I have a list of items on the right side of my page (not scrollable). Items scales of 1.25% on mouse over to get a nice zoom effect, and the scaled item is visible outside the container boundaries.
when I add overflow:auto; to the container, scaled items are clipped inside the container. is it possible to have the scrolling and the items scale outside the content?
<html>
<head>
<style>
body {
overflow: hidden;
}
.zoom {
padding: 2rem;
background-color: green;
width: 5rem;
height: 5rem;
border: solid .2rem red;
}
.container {
background-color: #eee;
padding: 1rem;
width: 10rem;
height: 30rem;
margin-left: auto;
overflow-y: scroll; // <- makes items clipped
overflow-x: hidden; // <- makes items clipped
display: flex;
gap: 1rem;
flex-direction: column;
}
.zoom:hover {
transform: scale(1.50) translateX(-1rem);
}
</style>
</head>
<body>
<div class=container>
<div class="zoom">element 1</div>
<div class="zoom">element 2</div>
<div class="zoom">element 3</div>
<div class="zoom">element 4</div>
<div class="zoom">element 5</div>
<div class="zoom">element 6</div>
</div>
</body>
</html>
I tried to use overflow-clip-margin with different combination, or to add a nested container, but without effect.