.animated-image { display: grid; position: absolute; align-items: center; text-align: center; overflow: hidden; } .animated-image > * { grid-column: 1; grid-row: 1; position: relative; transition: all 0.5s; } .animated-image img { top: 0; z-index: 50; } .animated-image a { top: 100%; text-decoration: none; color: rgb(243, 243, 243); font-weight: bold; } .animated-image:hover img { top: -100% !important; } .animated-image:hover a { top: 0; }