Synesthesia: Hover vs Checkbox

index.html

<div class="hoverit"><h4> Hover it</h4></div>
<div class="check"> <h4>Check it</h4></div>
<div class="first"><h3><span class=h>H</span><span class="e">e</span><span class="y">y</span> <span class="m">m</span><span class="y">y</span> <span class="n">n</span><span class="a">a</span><span class="m">m</span><span class="e">e</span> <span class="i">i</span><span class="s">s</span> <span class="a">A</span><span class="n">n</span><span class="a">a</span></h3></div>

<div class="wraper">
<div class="hor"></div>
<div class="ver"></div>
</div>

<input type="checkbox" id="checktoggler">
<div class="page-wraper">
<label for="checktoggler" class="toggle">🍭</label>
<div class="second">
  <h3>H<span class="e-check">e</span><span class="y-check">y</span> <span class="m-check">m</span><span class="y-check">y</span> <span class="n-check">n</span><span class="a-check">a</span><span class="m-check">m</span><span class="e-check">e</span> <span class="i-check">i</span><span class="s-check">s</span> <span class="a-check">A</span><span class="n-check">n</span><span class="a-check">a</span></h3>
  </div>
</div>

style.css

/*
*{
background-color:rgba(0,0,0,0.1);
}*/

body{
  background-color:black;  
  width:1270px;
}


/*middle cross*/

.hor{
  border-top:2px solid white;
  width:100px;
  clear:all;
}

.ver{
  border-top:2px solid pink;
  width:100px;
  clear:all;
  transform: rotateZ(90deg);
}

.wraper{
  display:table;
  margin: auto;
  position:relative;
  z-index:2;
  top:130px;  
}

/*begins hover section*/

.hoverit{
  color:white;
  font-size:30px;
  position:relative;
  float:left;
  
}

.first{
  color:white;
  font-size:40px;
  position:absolute;
  float:left;
  padding-top:60px;
  
}

.h:hover{
  color:white;
}
.e:hover{
  color:green;
}
.y:hover{
  color:yellow;
}
.m:hover{
  color:#E8DF5D;
}
.n:hover{
  color:#899EBD;
}
.a:hover{
  color:#F7BEF7;
}
.i:hover{
  color:yellow;
}
.s:hover{
  color:#FC0022;
}

/*begins check section*/

.check{
  color:white;
  font-size:30px;
  float:right;
  position:relative;
  
}

#checktoggler{
  display:none;
}

.toggle{
  position:relative;
  float:right;
  top:5px;
  text-decoration:none;
  font-size: 30px;
  cursor:pointer;
  margin-right:-70px;
  z-index:1;
}

.second{
  color:white;
  font-size:40px;
  position:relative;
  float:right;
  padding-top:60px;
  margin-right:-110px;
}

#checktoggler:checked + .page-wraper .second .e-check{
  color:green;
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
}

#checktoggler:checked + .page-wraper .second .y-check{
  color:yellow;
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
}

#checktoggler:checked + .page-wraper .second .m-check{
  color:#E8DF5D;
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
}

#checktoggler:checked + .page-wraper .second .n-check{
  color:#899EBD;
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
}

#checktoggler:checked + .page-wraper .second .a-check{
  color:#F7BEF7;
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
}

#checktoggler:checked + .page-wraper .second .i-check{
  color:yellow;
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
}

#checktoggler:checked + .page-wraper .second .s-check{
  color:#FC0022;
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
}

  
  
  

synesthesia-hover-vs-checkbox.markdown

Synesthesia: Hover vs Checkbox

Just a small exercise with HTML and CSS that tries to materialize my synesthesia using either the hover pseudo class over letters or a checkbox state. The colors you see are the actual colors I project in my head for each letter (well, approximately..synesthesia can be very complex, trust me).

A Pen by Ana de Barros on CodePen.

License.