My challenge involves creating a horizontal scrolling list of movie posters. I want the posters to grow in size when hovered over, expanding outside of their container and overlapping other elements. I attempted to use 'position: absolute' on the image, but encountered issues with the behavior of other images in the list.
list.component.html
<div class="wrapper">
<h3>{{ heading }}</h3>
<div class="scrolls">
<div (click)="loadContent(content.id, content.type)" *ngFor="let content of list" class="imageDiv">
<img [src]="content.imgSrc" />
</div>
</div>
</div>
list.component.css
.wrapper {
background:transparent;
box-shadow: 1px 1px 10px #999;
margin: auto;
text-align: center;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px !important;
width: 100%;
padding-top: 5px;
}
h3 {
color: white;
font-weight: 500;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
white-space:nowrap;
height: 250px;
}
.imageDiv {
margin: 0;
height: 250px;
width: 1200px;
display: inline;
}
.imageDiv img {
box-shadow: 1px 1px 10px #999;
margin: 2px;
max-height: 250px;
cursor: pointer;
display: inline;
transition: all .2s ease-in-out;
}
img:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
z-index: 1 !important;
}
::-webkit-scrollbar{
height: 1px;
width: 1px;
background: gray;
}
::-webkit-scrollbar-thumb:horizontal{
background: #000;
border-radius: 10px;
}
image-list
https://i.sstatic.net/HSHnu.jpg