essential

<link href="https://fonts.googleapis.com/css2?family=Sail&family=Yeseva+One&display=swap" rel="stylesheet"><div class="essentialtitle">Alaska Reynolds</div>
<div class="essentialbase"><div class="essentialpic1" style="background-image:url('https://i.imgur.com/GeI4SvX.png');"> <div class="essentialbox">WATER</div></div><div class="essentialpic1" style="background-image:url('https://i.imgur.com/PYVT1Dm.png');"><div class="essentialbox">EARTH</div></div><div class="essentialpic2" style="background-image:url('https://i.imgur.com/7nM9nEr.png');"><div class="essentialbox2">The four elements are present all around and within you. They are essential to all life. You and the universe are formed by these four elements</div></div><div class="essentialpic3" style="background-image:url('https://i.imgur.com/HQRLH8t.png');"><div class="essentialbox">AIR</div></div><div class="essentialpic3" style="background-image:url('https://i.imgur.com/JlHE9Y4.png');"><div class="essentialbox">FIRE</div></div></div>
<div class="essentialcredit"><a href="https://lunamakescodes.tumblr.com/">⛧</a></div>
<style type="text/css">.essentialtitle { width: 490px; height: 70px; background-color: #8e47cc;transform:rotate(270deg); margin-top: 230px; font-family: Sail;  font-size: 55px; color: #fff; text-align: center;} .essentialbase {width:440px; height: 450px; background: #9a8aa8; padding: 20px;margin-top: -280px; margin-left: 280px;} .essentialpic1 {width:220px; height: 220px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); margin:0 auto; display: inline-block; overflow: hidden;} .essentialpic2 {width:220px; height: 220px;  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);margin-top: -110px; position: relative; left:110px; overflow: hidden; font-size: 20px; font-family: Yeseva One;} .essentialpic3 {width:220px; height: 220px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); margin-top:-107px;display: inline-block; overflow: hidden;} .essentialbox {height: 220px; width: 220px; display: table-cell; vertical-align: middle; font-size: 30px; text-align: center; color:#ffffff99; font-family: Yeseva One; opacity: 0;} .essentialpic1:hover .essentialbox{-webkit-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-ms-transition: all 1s ease-in;-o-transition: all 1s ease-in;transition: all 1s ease-in; opacity: 1;} .essentialpic2:hover .essentialbox2 {-webkit-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-ms-transition: all 1s ease-in;-o-transition: all 1s ease-in;transition: all 1s ease-in; opacity: 1;} .essentialpic3:hover .essentialbox {-webkit-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-ms-transition: all 1s ease-in;-o-transition: all 1s ease-in;transition: all 1s ease-in; opacity: 1;} .essentialbox2 {width: 100px; max-height:100px; background-color: #ffffff99; text-align: center; padding: 5px;  position: relative; top: 55px;left: 55px; font-family: Yeseva One; line-height: 14px; overflow: auto; font-size: 14px; opacity: 0;} div::-webkit-scrollbar { height: 32px; width: 5px; background: #ffffff99; } div::-webkit-scrollbar-thumb { background: #9a8aa8; } div::-webkit-scrollbar-track { background:#ffffff99; } .essentialcredit {font-size:20px; text-align:center;font-weight: bold;} .essentialcredit a {color: #9a8aa8;}</style>