MH8.- Ángel (aesthetic)

<div class="MH8"><strong>Titulo Aquí</strong>

<div style="background-image: url(https://i.postimg.cc/jdtD1tNs/006.jpg);"><a href="URL">Nombre 01</a></div>

<div style="background-image: url(https://i.postimg.cc/9fK4g9PS/001.jpg);"><a href="URL">Nombre 02</a></div>

<div style="background-image: url(https://i.postimg.cc/hjmXkGpG/002.jpg);"><a href="URL">Nombre 03</a></div>

<div style="background-image: url(https://i.postimg.cc/2yFV5KpR/003.jpg);"><a href="URL">Nombre 04</a></div>

<div style="background-image: url(https://i.postimg.cc/44zKwmYL/004.jpg);"><a href="URL">Nombre 05</a></div>

<div style="background-image: url(https://i.postimg.cc/J0WsMW25/005.jpg);"><a href="URL">Nombre 06</a></div>

</div><a class="miMH8" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a>

<link href="https://fonts.googleapis.com/css?family=Big+Shoulders+Text|PT+Sans&display=swap" rel="stylesheet"><style>.MH8, .MH8 * {box-sizing: border-box; scrollbar-color: #0006 #0003; scrollbar-width: thin;} .MH8 {border: 1px solid; width: 250px; margin: 10px auto; height: 350px; position: relative; text-align: center; font: 12px PT Sans; overflow: hidden; color: #8d99a0; box-shadow: 0 0 0 5px #FFFD, 0 0 0 6px;} .MH8 > br {display: none;} .MH8 > strong {display: block; font: 24px/50px Big Shoulders Text; box-shadow: inset 0 0 0 50px; -webkit-text-fill-color: #FFF; text-transform: uppercase; letter-spacing: 2px;} .MH8 > div {position: absolute; width: 100%; top: 50px; bottom: 0; animation: m-mar 10s linear infinite, m-up 30s linear infinite; animation-delay: -5s; left: 100%; background-position: center; background-size: cover; border-left: 1px solid;} @keyframes m-mar {from {left: 100%;} to {left: -100%;}} .MH8 > div:nth-of-type(2) {animation-delay: 0s, 0s;} .MH8 > div:nth-of-type(3) {animation-delay: 5s;} .MH8 > div:nth-of-type(4) {animation-delay: 10s;} .MH8 > div:nth-of-type(5) {animation-delay: 15s;} .MH8 > div:nth-of-type(6) {animation-delay: 20s;} @keyframes m-up {0% {z-index: 10;} 20% {z-index: 10;} 100% {z-index: 0;}} .MH8:hover > div {animation-play-state: paused;} .MH8 > div:before {content:""; border: 1px solid #FFF; position: absolute; top: 15px; left: 15px; right: 15px; top: 15px; bottom: 15px; box-shadow: 0 0 15px, inset 0 0 15px, 0 0 0 15px #FFF7;} .MH8 > div > a {position: absolute; left: 0; right: 0; font-weight: bold; letter-spacing: 3px; top: 30px; transition: .3s; color: #FFF; text-shadow: 1px 1px #8d99a0, -1px 1px #8d99a0, 1px -1px #8d99a0, -1px -1px #8d99a0, 0 0 5px #8d99a0; text-transform: uppercase;} .MH8 > div > a:hover {letter-spacing: 4px} .MH8 > div:nth-of-type(even) > a {top: unset; bottom: 30px;} .miMH8 {display: block; font: 10px arial; letter-spacing: 2px; text-align: center; transition: .5s;} .miMH8:hover {letter-spacing: 10px;}</style>