I'm trying to create a section where only one div will scroll not the whole page
like if the user hovers on the product images section then the product details section will stick
I don't want to show all product images to users on scroll only if hover on the product section
it's like images are scrolling on a div only
Codepen:https://codepen.io/taruunn/pen/MWONvdr
.productWrapper{
display:flex;
max-width:1440px;
margin:0 auto
}
.product_images{
display:flex;
flex-direction:column;
width: 100%;
flex: 1 1 50%;
}
.product_images img{
margin-top:25px
}
.product_details{
padding:0 25px;
width: 100%;
flex: 1 1 40%;
}
.product_images:hover +.product_details .product_sticky {
position: sticky;
top: 0;
}<div class="productWrapper">
<div class="product_images">
<img src="https://via.placeholder.com/400x600?text=product-image">
<img src="https://via.placeholder.com/400x600?text=product-image">
<img src="https://via.placeholder.com/400x600?text=product-image">
<img src="https://via.placeholder.com/400x600?text=product-image">
<img src="https://via.placeholder.com/400x600?text=product-image">
<img src="https://via.placeholder.com/600x900?text=product-image">
</div>
<div class="product_details">
<div class="product_sticky">
<h2>product title </h2>
<h4>Price</h4>
<p>Product description Product descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct description </p>
</div>
</div>
</div>This thing will be done by JavaScript. But if you don't want to use JS then this thing you will be doing by keyframes.
.productWrapper{
display:flex;
flex-wrap:wrap;
max-width:1440px;
margin:0 auto
}
.product_images{
display:flex;
flex-direction:column;
width: 100%;
flex: 1 1 50%;
position : relative;
overflow:hidden;
height:450px;
}
.product_images img{
margin-top:25px;
Position :absolute;
height:100%;
width:100%;
object-fit:cover;
}
.product_images img:nth-child(1){
top:0;
}
.product_images img:nth-child(2),
.product_images img:nth-child(3),
.product_images img:nth-child(4),
.product_images img:nth-child(5),
.product_images img:nth-child(6){
top: 200%;
}
.product_images:hover img{
animation-duration: .5s;
animation-fill-mode: forwards;
animation-name: mymove;
}
.product_images img:nth-child(2) {
animation-delay: 2s;
animation-duration: 0s;
z-index: 1;
}
.product_images img:nth-child(3) {
animation-delay: 3s;
z-index: 2;
}
.product_images img:nth-child(4) {
animation-delay: 6s;
z-index: 4;
}
.product_images img:nth-child(5) {
animation-delay: 9s;
z-index: 5;
}
.product_images img:nth-child(6) {
animation-delay: 12s;
z-index: 6;
}
.product_details{
padding:0 25px;
width: 100%;
flex: 1 1 40%;
}
.product_images:hover +.product_details .product_sticky {
position: sticky;
top: 0;
}
@keyframes mymove{
0% {
top: 200%;
}
100% {
top: 0;
}
}<div class="productWrapper">
<div class="product_images">
<img src="https://via.placeholder.com/400x600?text=product-image">
<img src="https://via.placeholder.com/400x600?text=product-image">
<img src="https://via.placeholder.com/400x600?text=product-image">
<img src="https://via.placeholder.com/400x600?text=product-image">
<img src="https://via.placeholder.com/400x600?text=product-image">
<img src="https://via.placeholder.com/600x900?text=product-image">
</div>
<div class="product_details">
<div class="product_sticky">
<h2>product title </h2>
<h4>Price</h4>
<p>Product description Product descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct description </p>
</div>
</div>
</div>