.packagetile { list-style: none; padding: 0; margin: 0; } .packagetile a { display: block; padding-bottom: 66.66%; border-radius: 3px; position: relative; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-fit: cover; padding: 0; margin: 0; } } .packagegridscrub { position: absolute; top: 50%; right: 0; bottom: 0; left: 0; padding: 5px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5)); } .packagegridinfo { position: absolute; right: 0; bottom: 0; left: 0; padding: 1em; h3 { color: white; font-size: 120%; font-weight: bold; margin: 0; padding: 0; } small { color: #ddd; font-size: 75%; font-weight: bold; } p { display: none; color: #ddd; font-weight: normal; } } .packagetile a:hover { .packagegridinfo { top: 0; } h3 { margin-bottom: 0.5em; } p { display: block; } .packagegridscrub { top: 0; background: rgba(0,0,0,0.8); } }