Día de los muertos - V1

<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Aladin&family=Crimson+Text&family=Pacifico&display=swap" rel="stylesheet"><div id="diamuer1"> <div class="diamuertcont"> <div class="diamuer2"> <div class="diamu0" style="border: 2px solid var(--color4);"> <div class="diamuimg" style="background: url('IMAGEN');"> </div><div class="diamuhv1" style="color: var(--color4);"> <span class="th th-skull-o"></span> <div class="diamutit">TITULO 1</div><div class="diamuhv2" style="background: var(--color4);"> <div class="diamutit2">TITULO 2</div><div class="diamutext1">TEXTO AQUI </div></div><div class="diamuimghv"> <div class="diamudat" style="background: var(--color4);">Otro</div><div class="diamudat" style="background: var(--color4);">Otro</div><div class="diamudat" style="background: var(--color4);">Otro</div><div class="diamudat" style="background: var(--color4);">Otro</div></div></div></div></div></div></div><div id="myscr"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div><style>#diamuer1{--color1: #000; --color2: #FFF; --color3: #1C1B1B; --color4: #FAC902; --color5: #0FC2C2;}#diamuer1{margin: 0 auto; background: var(--color1); width: 520px; height: 320px; padding: 5px;}.diamuertcont{margin: 0 auto; margin-top: 30px;margin-left: 10px;}.diamuer2{width: 500px; height: 300px; position: absolute; margin-top: -20px; background: var(--color3);}.diamu0{width: 470px; height: 270px; padding: 5px; margin: 0 auto; margin-top: 8px;}.diamuimg{width: 200px; height: 270px;}.diamuhv1{margin: 0 auto; text-align: center; position: absolute; margin-top: -200px; margin-left:210px;}.diamu0 span{width: 80px; height: 80px; font-size: 80px;}.diamutit{font-size: 40px; margin: 0 auto; font-family:'Aladin'; margin-top: 15px;}.diamuhv2{width: 245px; height: 250px; padding: 10px; position: absolute; margin-right: -500px; margin-top: -185px; font-size: 12px; color: var(--color1); opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}.diamuhv1:hover .diamuhv2{margin-left: -6px; opacity:1; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}.diamuimghv{margin-top: -40px; margin-left: -211px; position: absolute;}.diamudat{width: 200px; height: 20px; color: var(--color1); margin-top: 2px; font-size: 15px; text-align: center; line-height: 20px; font-family:'Crimson Text'; margin-left: -50px; opacity: 0; transition: all 0.5s ease-in-out;}.diamuhv1:hover .diamudat{margin-left: 0px; opacity: 1; transition: all 0.5s ease-in-out;}.diamutit2{font-size: 30px; margin: 9px auto; font-family:'Aladin'; color: var(--color1);}.diamutext1{font-family:'Crimson Text'; font-size: 14px; text-align: justify; width: 230px; height: 190px; padding: 10px; margin: 0 auto; margin-left: -4px; margin-top: -4px; overflow: auto;}#myscr{font-family: 'Century Gothic'; font-size: 11px; text-align: center; color: #333 ; margin: 0 auto; margin-top: 1px;}#myscr a{color: #333;text-decoration: none;}.diamutext1::-webkit-scrollbar{width:3px; height: auto;}.diamutext1::-webkit-scrollbar-thumb:vertical{background-color: var(--color3);}.diamutext1::-moz-scrollbar{width:2px; height: auto;}.diamutext1::-moz-scrollbar-thumb:vertical{background-color: var(--color3);}</style>