body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f9f9f9; } .crew-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; padding: 20px; background: #fff; } .item-container { width: 220px; position: relative; } .thumb { position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .thumb img { width: 100%; height: 200px; object-fit: cover; display: block; } .overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 100%; background: rgba(0, 0, 0, 0.8); color: #fff; padding: 10px; transform: translateY(100%); transition: transform 0.3s ease; font-size: 13px; text-align: left; overflow-y: auto; } .thumb:hover .overlay { transform: translateY(0); }