The Grid

@import url('https://fonts.googleapis.com/css?family=Quicksand');

  body {
    background-color:fff;
overflow:hidden;
}


@font-face {
 font-family: 'SF4';
 src: url('https://dl.dropboxusercontent.com/s/o5pvlzifoz6okvd/SSF4%20ABUKET.ttf');
}

::-webkit-scrollbar
{
    width:0px;
    background-color: transparent;
}


#overlay{
 background-image:url(https://i.imgur.com/rX4SqP8.png);
 background-size:40%;
 width:100%;
 height:100%;
 position:absolute;
 z-index:1;
 top:0px;
 left:0px;
 filter:brightness(100%);

}

#overlayshadow{
 width:100%;
 height:100%;
 background-color:transparent;
 box-shadow:inset 0px 0px 1500px 0px #000;
 position:absolute;
 top:0px;
 left:0px;
 z-index:2;
}

#box{
 width:800px;
 height:700px;
 background-color:#731b25;
 position:absolute;
 z-index:50;
  top:50%;
  left:50%;
  margin-left:-650px;
  margin-top:-300px;
  background-image:url(https://www.transparenttextures.com/patterns/squared-metal.png);
  background-size:20%;
}

#boxinterior{
 height: 660px;
 width:760px;
 position:absolute;
 background-color:#bf1919;
 position:absolute;
 top:20px;
 left:20px;
 box-shadow:inset 0px 0px 30px 0px #000;
}

#bloch1{
  background-image:url(https://i.imgur.com/7xktVxa.png);
  background-size:100%;
  background-repeat:no-repeat;
  width:1100px;
  height:300px;
  margin-top:-70px;
  margin-left:150px;
  transform:rotate(15deg);
  position:absolute;
}



.text{
 font-family: 'SF4';
 font-size:120pt;
 color:#000;
 position:absolute;
 margin-top:40px;
 margin-left:160px;
 z-index:5;
}

.text2{
 font-family: 'SF4';
 font-size:115pt;
 color:#000;
 position:absolute;
 margin-top:40px;
 margin-left:160px;
 z-index:3;
opacity:0;
}

.text3{
 font-family: 'SF4';
 font-size:94pt;
 color:#000;
 position:absolute;
 margin-top:40px;
 margin-left:160px;
 z-index:3;
opacity:0;
}

.text4{
 font-family: 'SF4';
 font-size:100pt;
 color:#000;
 position:absolute;
 margin-top:40px;
 margin-left:160px;
 z-index:3;
opacity:0;
}

.textshadow{
 font-family: 'SF4';
 font-size:125pt;
 color:#fff;
 position:absolute;
 margin-top:40px;
 margin-left:145px;
z-index:4;
}

.textshadow2{
 font-family: 'SF4';
 font-size:120pt;
 color:#fff;
 position:absolute;
 margin-top:40px;
 margin-left:145px;
z-index:2;
opacity:0;
}

.textshadow3 {
 font-family: 'SF4';
 font-size:99pt;
 color:#fff;
 position:absolute;
 margin-top:40px;
 margin-left:145px;
z-index:2;
opacity:0;
}

.textshadow4{
 font-family: 'SF4';
 font-size:105pt;
 color:#fff;
 position:absolute;
 margin-top:40px;
 margin-left:125px;
z-index:2;
opacity:0;
}


#box1{
  width:720px;
  height:620px;
  background-color:transparent;
  position:absolute;
  margin-top:20px;
  margin-left:20px;
  overflow:hidden;
  z-index:11;

}

#box2, #box3, #box4{
  width:720px;
  height:620px;
  background-color:transparent;
  position:absolute;
  margin-top:20px;
  margin-left:20px;
  overflow:hidden;
  z-index:10;
opacity:0;
}

.info1{
width:340px;
height:500px;
background-color:rgba(255, 255, 255, 0.5);
position:absolute;
top:0px;
left:0px;
margin-top:60px;
padding:30px;
oveflow:auto;
color:#fff;
font-family: 'Quicksand', sans-serif;
font-size:14pt;
}

.info2{
background-color:rgba(255, 255, 255, 0.5);
width:240px;
height:340px;
position:absolute;
right:0px;
bottom:0px;
margin-bottom:50px;
padding:30px;
color:#fff;
font-family: 'Quicksand', sans-serif;
font-size:14pt;
overflow:auto;
}

.info3{
background-color:rgba(255, 255, 255, 0.5);
width:640px;
height:290px;
position:absolute;
bottom:0px;
left:0px;
padding:30px;
color:#fff;
font-family: 'Quicksand', sans-serif;
font-size:14pt;
overflow:auto;}

.info4{
background-color:rgba(255, 255, 255, 0.5);
width:360px;
height:160px;
position:absolute;
top:0px;
left:0px;
margin-top:50px;
oveflow:auto;
padding:20px;
color:#fff;
font-family: 'Quicksand', sans-serif;
font-size:14pt;
}

.rules{
width:340px;
height:200px;
position:absolute;
overflow:auto;
top:100px;
}

h1{
 font-family: 'SF4';
font-size:30pt;
color:#fff;
margin-top:20px;
margin-left:20px;
}

h2{
 font-family: 'SF4';
font-size:20pt;
color:#fff;
margin-top:20px;
margin-left:20px;
}

h3{
 font-family: 'SF4';
font-size:30pt;
color:#fff;
margin-top:40px;
margin-left:20px;
}
.oc{
width:340px;
height:160px;
position:absolute;
top:370px;
overflow:auto;

}

 b{
background-color:#731b25;

transition:.5s;
text-align:center;
}

b:hover{
background-color:#fff;
color:#000;
}

i {
color:#fff;
transition:1s;
}

 i:hover{
color:#000;
}

.setting{
width:240px;
height:280px;
position:absolute;
overflow:auto;
text-align:justify;
}


.header{
background-image:url(https://i.imgur.com/tfeaVbs.png);
background-size:contain;
color:#fff;
width:340px;
height:70px;
position:absolute;
top:20px;
}

.header2{
background-image:url(https://i.imgur.com/BjwnXMG.png);
background-repeat:no-repeat;
background-size:contain;
color:#fff;
width:100%;
height:70px;
position:absolute;
top:300px;
}

.header3{
background-image:url(https://i.imgur.com/tBmMeKI.png);
background-repeat:no-repeat;
background-size:contain;
color:#fff;
width:110%;
height:70px;
margin-left:-10px;
margin-top:-30px;
}

.fighting{

width:340px;
height:440px;
position:absolute;
overflow:auto;
top:100px;
text-align:justify;
}

.fighting a{
color:#fff;
text-decoration:none;
transition:1s;
}

.fighting a:hover{
color:#000;
}

.header4{
background-image:url(https://i.imgur.com/4ST07rt.png);
background-repeat:no-repeat;
background-size:contain;
color:#fff;
width:100%;
height:100px;
position:absolute;
z-index:30;
}

.navifriends{
width:640px;
height:contain;
float:left;
}

.Stages{
width:640px;
height:260px;
overflow:auto;
margin-top:30px;
}

#blanket1:target #box1{
opacity:1;
z-index:11;
transition:.5s;
}

#blanket1:target #box2{
opacity:0;
z-index:10;transition:.5s;

}
#blanket1:target #box3{
opacity:0;
z-index:10;transition:.5s;

}

#blanket1:target #box4{
opacity:0;
z-index:10;transition:.5s;

}

#blanket1:target .text{
opacity:1;
z-index:5;transition:.5s;

}

#blanket1:target .textshadow{
opacity:1;
transition:.5s;
z-index:4;
}

#blanket1:target .text2{
transition:.5s;
opacity:0;
z-index:3;
}

#blanket1:target .textshadow2{
transition:.5s;
opacity:0;
z-index:2;
}

#blanket1:target .text3{
transition:.5s;
opacity:0;
z-index:3;
}

#blanket1:target .textshadow3{
opacity:0;
transition:.5s;
z-index:2;
}

#blanket1:target .text4{
opacity:0;
transition:.5s;
z-index:3;
}

#blanket1:target .textshadow4{
opacity:0;
transition:.5s;
z-index:2;
}

#blanket2:target #box1{
opacity:0;
transition:.5s;
z-index:10;
}

#blanket2:target #box2{
opacity:1;
transition:.5s;
z-index:12;
}
#blanket2:target #box3{
opacity:0;
transition:.5s;
z-index:10;
}

#blanket2:target #box4{
transition:.5s;
opacity:0;
z-index:10;
}

#blanket2:target .text{
transition:.5s;
opacity:0;
z-index:3;
}

#blanket2:target .textshadow{
transition:.5s;
opacity:0;
z-index:2;
}

#blanket2:target .text2{
transition:.5s;
opacity:1;
z-index:5;
}

#blanket2:target .textshadow2{
transition:.5s;
opacity:1;
z-index:4;
}

#blanket2:target .text3{
transition:.5s;
opacity:0;
z-index:3;
}

#blanket2:target .textshadow3{
transition:.5s;
opacity:0;
z-index:2;
}

#blanket2:target .text4{
transition:.5s;
opacity:0;
z-index:3;
}

#blanket2:target .textshadow4{
transition:.5s;
opacity:0;
z-index:2;
}

#blanket3:target #box1{
transition:.5s;
opacity:0;
z-index:10;
}

#blanket3:target #box2{
transition:.5s;
opacity:0;
z-index:10;
}
#blanket3:target #box3{
transition:.5s;
opacity:1;
z-index:12;
}

#blanket3:target #box4{
transition:.5s;
opacity:0;
z-index:10;
}

#blanket3:target .text{
transition:.5s;
opacity:0;
z-index:3;
}

#blanket3:target .textshadow{
transition:.5s;
opacity:0;
z-index:2;
}

#blanket3:target .text2{
transition:.5s;
opacity:0;
z-index:3;
}

#blanket3:target .textshadow2{
transition:.5s;
opacity:0;
z-index:2;
}

#blanket3:target .text3{
transition:.5s;
opacity:1;
z-index:5;
}

#blanket3:target .textshadow3{
transition:.5s;
opacity:1;
z-index:4;
}

#blanket3:target .text4{
transition:.5s;
opacity:0;
z-index:3;
}

#blanket3:target .textshadow4{
transition:.5s;
opacity:0;
z-index:2;
}

#blanket4:target #box1{
transition:.5s;
opacity:0;
z-index:10;
}

#blanket4:target #box2{
transition:.5s;
opacity:0;
z-index:10;
}
#blanket4:target #box3{
transition:.5s;
opacity:0;
z-index:10;
}

#blanket4:target #box4{
transition:.5s;
opacity:1;
z-index:12;
}

#blanket4:target .text{
transition:.5s;
opacity:0;
z-index:3;
}

#blanket4:target .textshadow{
transition:.5s;
opacity:0;
z-index:2;
}

#blanket4:target .text2{
transition:.5s;
opacity:0;
z-index:3;
}

#blanket4:target .textshadow2{
transition:.5s;
opacity:0;
z-index:2;
}

#blanket4:target .text3{
transition:.5s;
opacity:0;
z-index:3;
}

#blanket4:target .textshadow3{
transition:.5s;
opacity:0;
z-index:2;
}

#blanket4:target .text4{
transition:.5s;
opacity:1;
z-index:5;
}

#blanket4:target .textshadow4{
transition:.5s;
opacity:1;
z-index:4;
}

#navi{
 background-color:transparent;
 width:400px;
 height:550px;
 position:absolute;
 z-index:10;
 top:50%;
 left:50%;
 margin-left:-900px;
 margin-top:-275px;
}


#navi a{
  width:400px;
  height:100px;
  float:left;
  background-image:url(https://i.imgur.com/9vnlaVA.png);
  margin-top:50px;
  filter:drop-shadow(0px 0px 5px #000);

}

#navi a:hover #thing{
   animation:blink1 .5s infinite;

}

#navi a:hover #thing2{
   animation:blink2 .5s infinite;

}

#navi a:hover #thing3{
   animation:blink3 .5s infinite;

}
#thing{
  background-image:url(https://i.imgur.com/qPNdkdN.png);
  width:75px;
  height:110px;
  background-size:100%;
  position:absolute;
  margin-top:-5px;
   margin-left:-20px;
  opacity:1;
}

#thing2{
  background-image:url(https://i.imgur.com/qPNdkdN.png);
   width:75px;
  height:110px;
  background-size:100%;
  position:absolute;
  margin-top:-5px;
  margin-left:10px;
  opacity:0.75;

}

#thing3{
  background-image:url(https://i.imgur.com/qPNdkdN.png);
  width:75px;
  height:110px;
  background-size:100%;
  position:absolute;
  margin-top:-5px;
  margin-left:40px;
  opacity:0.5;

}

@keyframes blink1{
 0%{


     opacity:1;



 }

 35%{
   opacity:0.75;

 }



 70%{

     opacity:0.5;



 }

 100%{

     opacity:1;


 }

}

@keyframes blink2{
 0%{


     opacity:0.75;



 }


 35{
  opacity:0.5;
 }


 70%{

     opacity:1;



 }

 100%{

     opacity:0.75;


 }

}

@keyframes blink3{
 0%{


     opacity:0.5;



 }

 35%{
  opacity:1;
 }


 50%{

     opacity:0.75;



 }

 100%{

     opacity:0.5;


 }

}


</style>
</head>
<body>
<div id="blanket1"> <div id="blanket2"> <div id="blanket3"> <div id="blanket4">
<div id="overlay"></div>
<div id="overlayshadow"></div>
<div id="box">
 <div id="boxinterior">
 <div id="bloch1">
<div class="text">THE GRID</div><div class="textshadow">THE GRID</div>
<div class="text2">THE FIGHT</div><div class="textshadow2">THE FIGHT</div>
<div class="text3">THE ROSTER</div><div class="textshadow3">THE ROSTER</div>
<div class="text4">THE ARENA</div><div class="textshadow4">THE ARENA</div>
</div>

 <div id="box1">
<div class="info1">
<div class="header"><h1>Setting</h1></div>

<div class="rules">
The multiverse is in jeopardy (for the umpteenth time), The Grid was created to resolve this crisis, a man-made alternate modular dimension where warriors from all over the multiverse are pitched against each other to appease an insatiable god that seeks conflict. Will the multiverse fall? Will the warriors save the world? <b>Welcome to The Grid.</b> </div>
<div class="header2"><h1>OC Creation</h1></div>

<div class="oc">
<b>00</b>All OCs must have a profile stating their character's basic stats. <br>
<b>01</b>First and foremost, the OC must state <i> which franchise their character comes from </i> and their <i> affiliation with the universe</i>. <br>
<b>02</b>Tasteful art is allowed, but try not to go overboard with NSFW/Sexual content on your profile as well as anything illegal (underaged characters). <br>
<b>03</b>All abilities and where they come from must be explained as well as their connection with the original canon of the character's game of origin. <br>
<b>04</b>Be mindful of how overpowered your character is, try to make them feel balanced. <br>
<b>05</b>Real life face claims are not allowed in the room.
</div>
</div>
<div class="info2">
<div class="header3"><h1><center>Rules</center></h1></div>
<div class="setting">
<b>00</b> Canon characters from <i> any and all original fighting games </i> are welcomed here. We are currently <i> also allowing crossover titles like Marvel Vs Capcom, Smash, Dragon Ball Fighter Z, Cross Tag Battle, and Injustice </i>.<br>
<b>01</b>Doubles are <i> allowed and welcomed </i> however <i>room plot participation works in a first come, first serve basis</i>. Doubles involvement can be discussed.<br>
<b>02</b><i> OCs must be approved by the mod team</i>. They can <i> interact in the room </i>, but to use their powers and fight in the room they must <i>first be approved</i>. Relationships with canon characters must also be approved.<br>
<b>03</b> Godmodding of any kind is forbidden without the roleplayer/room consent. <br>
<b>04</b> No Spamming or trolling. We're all adults here.<br>
<b>05</b> Keep NSFW roleplay in DMs. <br>
<b>06</b>This profile is always a WIP
</div>
</div>

</div>
 <div id="box2">

<div class="info1"><div class="header"><h1>Fighting</h1></div>
<div class="fighting">
As much plot as the room will have, half of the reason of a fighting games room are the fights. The room staff gives people full responsibility of their fights (if they want to) and to use whatever rules they want to decide the winner. However, for those who are unfamiliar with roleplay fighting this we will give you a couple of explanations on a couple of well known rules, as well as the house rule for the room.<br><br>
<div class="header4"><h3>T1 Fighting</h3></div><br><br><br><br><br>
<a target="_blank" href="https://www.scribd.com/doc/11548456/T1-Rules-and-Guidelines-for-the-Modern-Day-Role-Player"><b>The source for the information below</b></a>
<b>01</b>If you forget to post something in your intro; Power, ability, weapon, trait. You <i> can not </i> use it any time later in the fight. Those things forgotten are off limits. If they are used, it is grounds for Disqualification from the match through the no God Moding tolerance. This is a competition between the knowledge of two minds on how well they know their character.<br>
<b>02</b>No power playing. That involves no selling a hit (getting up from a punch like nothing happened) or attacks that land automatically..<br>
<b>03</b> Quantity is not required, but the more detail you put into your posts the bigger your chances or winning. That also goes for Punctuation and grammar. Well structured post will net you an easier win than run-on sentences. <br>
<div class="header4"><h3>House Rule</h3></div><br><br><br><br><br>
The house rule is pretty simple. All parties involved in the fight send a DM to the room profile (this one) rolling dice 4 times, they pick the 3 best results and arrange them in the order they want and write posts separating the action they'll perform with regarding each roll. Longer posts come at the discretion of the person writing it, but intelligible detail on the actions they're perfoming takes precedent. After the attacker posts the defender replies. Damage is calculated by the difference between the attacker and the defender rolls until it reaches a pre-determined number. <br>
Some specifics. Rolling a 20 on attack is an auto hit that always deals double the damage difference between the rolls, rolling a 20 on defense is a perfect parry and counter attack that does a fixed 10 damage. Counter attacks also happen when the difference between the rolls of both defense and attack are 10 and over. Counter attack means that the attacking character will now be defending and the defending will do damage equal to half the difference between their posts which always starts at 5. Chip damage happens when the defense rolls are higher than the attack rolls, but the difference isn't higher than 9 the chip damage will always cap at 3 damage and are calculated following these parameters: a difference of 1-3 = 3 damage, a difference of 4-6 = 2 damage and a difference of 7-9 = 1 damage.
</div>
</div>
<div class="info2"><div class="header3"><h2><center>Memorable Fights</center></h2></div>
<div class="setting">
<b>There will be links here hopefully!</b><br>
</div>
</div>
</div>
 <div id="box3">
<div class="info3">

<font style="float:left;"><img src="https://i.imgur.com/7XSBLN8.png" style="width:250px;"></img></font>Street Fighter (ストリートファイター Sutorīto Faitā), commonly abbreviated as SF or スト (Suto), is a fighting video game franchise developed and published by Capcom. The first game in the series was released in 1987, followed by five other main series games, various spin-offs and crossovers, and numerous appearances in various other media. Its best-selling 1991 release Street Fighter II is credited with establishing many of the conventions of the one-on-one fighting genre. Street Fighter is one of the highest-grossing video game franchises of all time and serves as the company's flagship series.<br><br>
<div class="navifriends">
<center><a target="_blank" href="https://roleplay.chat/profile.php?user=Master+Bison"><img src="https://i.imgur.com/QlcGL4s.png" style="width:150px; margin-left:0px;"></img></a><a href="#"><img src="https://i.imgur.com/ssHerQL.png" style="width:150px; margin-left:-20px;"></img></a> <a href="#"><img src="https://i.imgur.com/AYosLvz.png" style="width:150px; margin-left:-5px;"></img></a><a href="#"><img src="https://i.imgur.com/AYosLvz.png" style="width:150px; margin-left:-20px;"></img></a></center>
</div>
<br><br><br><br>
<font style="float:right;"><img src="https://i.imgur.com/mHtP5lP.png" style="width:250px;"></img></font>Tekken (Japanese: 鉄拳, "Iron Fist") is a fighting video game franchise created, developed, and published by Namco (later Bandai Namco Entertainment). Beginning with the original Tekken released in December 1994, the series has received several sequels as well as updates and spin-off titles. Tekken was one of the first fighting games at the time to use 3D animation. The premise of each game in the main series documents the events of the King of Iron Fist Tournament, hosted by the Mishima Zaibatsu. The prize is typically control of the company, which allows the winner to host the following tournament. Tekken 2 and Tekken 3 are considered breakthrough titles and among the greatest games of all time, the latter also being the second best-selling fighting game to date. Tekken is the second best selling fighting game franchise in history.<br><br>
<div class="navifriends">
<center><a target="_blank" href="https://roleplay.chat/profile.php?user=Steve+Fox"><img src="https://i.imgur.com/1xfTLf3.png" style="width:90px; margin-left:0px;"></img></a><a href="#"><img src="https://i.imgur.com/UI0F4gm.png" style="width:90px; margin-left:10px;"></img></a><a href="#"><img src="https://i.imgur.com/UI0F4gm.png" style="width:90px; margin-left:10px;"></img></a><a href="#"><img src="https://i.imgur.com/UI0F4gm.png" style="width:90px; margin-left:10px;"></img></a><a href="#"><img src="https://i.imgur.com/UI0F4gm.png" style="width:90px; margin-left:10px;"></img></a><a href="#"><img src="https://i.imgur.com/UI0F4gm.png" style="width:90px; margin-left:10px;"></img></a></center>
</div>
<br><br><br><br><br><br><br><br><br>
<font style="float:left;"><img src="https://i.imgur.com/W9ykAwk.png" style="width:350px;"></img></font>Under Night In-Birth takes place in a fictional modern-day setting some time in the 21st century. A phenomenon called the Hollow Night (虚ろの夜 utsuro no yoru) has been enveloping particular regions of Japan once a month for several centuries. Each area engulfed in the Hollow Night is beset by shadow-like creatures called Voids (虚無 kyomu (Immortals (イモータル imōtaru) in Japan)) that utilize and feed upon a power known as "Existence", or EXS (イグジス igujisu). Normal humans cannot see or come into contact with Voids, but certain people have the potential to perceive them. Those who acquire this perception are targeted by Voids and risk either being consumed by them or losing their sanity. Under special circumstances, a person who maintains their sanity after being attacked by a Void can become a being known as an In-Birth (インヴァース invāsu). If a person or even an In-Birth becomes a fallen type of Void, their EXS transforms into FLS (ファルス farusu), the power source of the Voids and the man-made ancient being known as Autonomic Nerves (オートノミックナーヴ otomatiku neruvēsu), powered by Curse Commandment (呪戒 noroikai). While this status places a person into a sort of limbo where they are neither living nor dead, they also gain the ability to control Existence. The protagonist, Hyde Kido, is one of the characters who survived a Void attack and became an In-Birth.
<br><br>
<div class="navifriends">
<center><a target="_blank" href="https://roleplay.chat/profile.php?user=Steve+Fox"><img src="https://i.imgur.com/53VlsUt.png" style="width:90px; margin-left:-30px;"></img></a><a href=""><img src="https://i.imgur.com/e57y5X4.png" style="width:90px; margin-left:0px; margin-top:0px;"></img></a><a href=""><img src="https://i.imgur.com/eEIsL5i.png" style="width:90px; margin-left:0px; margin-top:40px;"></img></a><a href=""><img src="https://i.imgur.com/e57y5X4.png" style="width:90px; margin-left:0px; margin-top:0px;"></img></a><a href=""><img src="https://i.imgur.com/eEIsL5i.png" style="width:90px; margin-left:0px; margin-top:40px;"></img></a><a href=""><img src="https://i.imgur.com/e57y5X4.png" style="width:90px; margin-left:0px; margin-top:0px;"></img></a></center>
</div>
</div>
<div class="info4">mem</div>
</div>
 <div id="box4">
<div class="header4" style="margin-top:250px; width:250px;"><h1>Stages</h1></div>
<div class="info3">
<div class="Stages">
<font style="float:left;"><img src="https://i.imgur.com/GZAkhWj.jpg" style="width:350px;"></img></font>While the training mode has been available in most (if not all) of the Street Fighter games, this stage is designed specifically for the purposes of practicing. Trials and Training Mode (in the Street Fighter IV games only) automatically take place here.<br>

In all of its appearances so far, the Training Stage is designed to minimize distraction, which would be caused by the background and other interactive elements within a stage. As a result, the room is flat and mostly featureless, save for the inclusion of evenly marked lines. The blue squares on the floor mark the 'plane' where the gameplay takes place, and blue squares are placed around the red lines that divide the stages into equal halves.<br>
The Street Fighter V iteration, The Grid, is revealed to be part of a Shadaloo testing facility - more specifically, F.A.N.G's lab, which he uses to test kidnapped fighters and have them battle against simulations until their death. Alex's story mode has him destroying the lab after being forced into fighting simulations, forcing F.A.N.G to set him loose.
</div>
</div>
<div class="info4"></div>
</div>
 </div>

</div>
<div id="navi">
 <a href="#blanket1">
 <img src="https://i.imgur.com/8u1uXrk.png" style="position:absolute; width:90px; left:130px; top:-30px; filter:brightness(10000%) drop-shadow(5px 5px #000); transform:rotate(10deg); "></img>

 <div id="thing"></div>
 <div id="thing2"></div>
 <div id="thing3"></div>
 </a>
 <a href="#blanket2">
 <img src="https://i.imgur.com/NlfhJwg.png" style="position:absolute; width:120px; left:110px; top:-30px; filter:brightness(10000%) drop-shadow(5px 5px #000); "></img>
 <div id="thing"></div>
 <div id="thing2"></div>
 <div id="thing3"></div>
 </a>

 <a href="#blanket3">
 <img src="https://i.imgur.com/vPCThAR.png" style="position:absolute; width:120px; left:110px; top:-30px; filter:drop-shadow(5px 5px #000); "></img>
 <div id="thing"></div>
 <div id="thing2"></div>
 <div id="thing3"></div>
 </a>
 <a href="#blanket4">
 <img src="https://i.imgur.com/lWuzjBi.png" style="position:absolute; width:120px; left:110px; top:-30px; filter:brightness(10000%)drop-shadow(5px 5px #000); transform:rotate(-10deg); "></img>
 <div id="thing"></div>
 <div id="thing2"></div>
 <div id="thing3"></div>
 </a>
</div>