content { border: 1px solid #ddd; display: flex; flex-direction: column; flex: flex-grow; padding: 1rem; } carousel { position: relative; } carousel figure { display: none; } carousel figure.active { display: flex; position: relative; flex-direction: column; } carousel figure img { width: 100%; } carousel figure figcaption { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font-size: 2em; background: var(--color-bg-secondary); opacity: 0%; } carousel figure figcaption:hover { opacity: 90%; } carousel next,prev { position: absolute; bottom: 0; opacity: 0%; height: 100%; display: flex; flex-direction: column; align-content: center; justify-content: center; } carousel next { right: 0; } carousel prev { left: 0; } carousel next:hover,prev:hover { opacity: 60%; background-color: var(--color-bg); }