.image-dropdown{
    display:flex;
    flex-wrap: wrap;
    max-height:100px;
    overflow: hidden;
    align-items: center;
    padding:5px;
    mask-image: linear-gradient(to bottom, transparent 0px, black 10px, black calc(100% - 10px), transparent);
}
.image-dropdown:hover{
    box-shadow: 0 0 0 1px #bbbbbb;
    overflow:scroll;
    max-height:300px;
    transition: max-height 0.3s ease;
}
.image-dropdown input, .image-dropdown label:first-of-type{
    display:none;
}
.image-dropdown label{
    position:relative;
    width:20%;
    opacity:0.2;
    padding:4px;
    overflow:hidden;
    text-align:center;
}
@media screen and (max-width:768px){
    .image-dropdown label{
        width:33%;
    }
}
.image-dropdown label:hover, .image-dropdown input:checked + label{
    opacity:1;
    box-shadow: 0 0 0 1px #bbbbbb;
}
.image-dropdown:hover input:checked + label{
    box-shadow: 0 0 0 1px black;
}