WapTrick360

        <title>Periodic Table</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <div class="wrapper">
<ul class="main">
  
  <!-- ROW 1 -->
  
  <li data-pos="1" data-nb="1.0079" class="type-1 cat-1">H<span>Hydrogen</span></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  
  <li class="empty"></li>
  <li class="empty"></li>
  <li data-pos="2" data-nb="4.0026" class="type-2 cat-1">He<span>Helium</span></li>
  
  <!-- ROW 2 -->
  
  <li data-pos="3" data-nb="6.941" class="type-3 cat-1">Li<span>Lithium</span></li>
  <li data-pos="4" data-nb="9.0122" class="type-4 cat-1">Be<span>Beryllium</span></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  
  <li class="empty"></li>
  <li class="empty"></li>
  <li data-pos="5" data-nb="10.811" class="type-5 cat-1">B<span>Boron</span></li>
  <li data-pos="6" data-nb="12.011" class="type-1 cat-1">C<span>Carbon</span></li>
  <li data-pos="7" data-nb="14.007" class="type-1 cat-1">N<span>Nitrogen</span></li>
  
  <li data-pos="8" data-nb="15.999" class="type-1 cat-1">O<span>Oxygen</span></li>
  <li data-pos="9" data-nb="18.998" class="type-9 cat-1">F<span>Fluorine</span></li>
  <li data-pos="10" data-nb="20.180" class="type-2 cat-1">Ne<span>Neon</span></li>
  
  <!-- ROW 3 -->
  
  <li data-pos="11" data-nb="22.990" class="type-3 cat-1">Na<span>Sodium</span></li>
  <li data-pos="12" data-nb="24.305" class="type-4 cat-1">Mg<span>Magnesium</span></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  
  <li class="empty"></li>
  <li class="empty"></li>
  <li data-pos="13" data-nb="26.982" class="type-7 cat-1">Al<span>Aluminium</span></li>
  <li data-pos="14" data-nb="28.086" class="type-5 cat-1">Si<span>Silicon</span></li>
  <li data-pos="15" data-nb="30.974" class="type-1 cat-1">P<span>Phosphorus</span></li>
  
  <li data-pos="16" data-nb="32.065" class="type-1 cat-1">S<span>Sulfur</span></li>
  <li data-pos="17" data-nb="35.453" class="type-9 cat-1">Cl<span>Chlorine</span></li>
  <li data-pos="18" data-nb="39.948" class="type-2 cat-1">Ar<span>Argon</span></li>
  
  <!-- ROW 4 -->
  
  <li data-pos="19" data-nb="39.098" class="type-3 cat-1">K<span>Potassium</span></li>
  <li data-pos="20" data-nb="40.078" class="type-4 cat-1">Ca<span>Calcium</span></li>
  <li data-pos="21" data-nb="44.956" class="type-6 cat-1">Sc<span>Scandium</span></li>
  <li data-pos="22" data-nb="47.867" class="type-6 cat-1">Ti<span>Titanium</span></li>
  <li data-pos="23" data-nb="50.942" class="type-6 cat-1">V<span>Vanadium</span></li>
  
  <li data-pos="24" data-nb="51.996" class="type-6 cat-1">Cr<span>Chromium</span></li>
  <li data-pos="25" data-nb="54.938" class="type-6 cat-1">Mn<span>Manganese</span></li>
  <li data-pos="26" data-nb="55.845" class="type-6 cat-1">Fe<span>Iron</span></li>
  <li data-pos="27" data-nb="58.933" class="type-6 cat-1">Co<span>Cobalt</span></li>
  <li data-pos="28" data-nb="58.693" class="type-6 cat-1">Ni<span>Nickel</span></li>
  
  <li data-pos="29" data-nb="63.546" class="type-6 cat-1">Cu<span>Copper</span></li>
  <li data-pos="30" data-nb="65.39" class="type-6 cat-1">Zn<span>Zinc</span></li>
  <li data-pos="31" data-nb="69.723" class="type-7 cat-1">Ga<span>Gallium</span></li>
  <li data-pos="32" data-nb="72.64" class="type-5 cat-1">Ge<span>Germanium</span></li>
  <li data-pos="33" data-nb="74.922" class="type-5 cat-1">As<span>Arsenic</span></li>
  
  <li data-pos="34" data-nb="78.96" class="type-1 cat-1">Se<span>Selenium</span></li>
  <li data-pos="35" data-nb="79.904" class="type-9 cat-1">Br<span>Bromine</span></li>
  <li data-pos="36" data-nb="83.80" class="type-2 cat-1">Kr<span>Krypton</span></li>
  
  <!-- ROW 5 -->
  
  <li data-pos="37" data-nb="85.468" class="type-3 cat-1">Rb<span>Rubidium</span></li>
  <li data-pos="38" data-nb="87.62" class="type-4 cat-1">Sr<span>Strontium</span></li>
  <li data-pos="39" data-nb="88.906" class="type-6 cat-1">Y<span>Yttrium</span></li>
  <li data-pos="40" data-nb="91.224" class="type-6 cat-1">Zr<span>Zirconium</span></li>
  <li data-pos="41" data-nb="92.906" class="type-6 cat-1">Nb<span>Niobium</span></li>
  
 <li data-pos="42" data-nb="95.94" class="type-6 cat-1">Mo<span>Molybdenum</span></li>
  <li data-pos="43" data-nb="(96)" class="type-6 cat-1">Tc<span>Technetium</span></li>
  <li data-pos="44" data-nb="101.07" class="type-6 cat-1">Ru<span>Ruthenium</span></li>
  <li data-pos="45" data-nb="102.91" class="type-6 cat-1">Rh<span>Rhodium</span></li>
  <li data-pos="46" data-nb="106.42" class="type-6 cat-1">Pd<span>Palladium</span></li>
  
  <li data-pos="47" data-nb="107.87" class="type-6 cat-1">Ag<span>Silver</span></li>
  <li data-pos="48" data-nb="112.41" class="type-6 cat-1">Cd<span>Cadmium</span></li>
  <li data-pos="49" data-nb="114.82" class="type-7 cat-1">In<span>Indium</span></li>
  <li data-pos="50" data-nb="118.71" class="type-7 cat-1">Sn<span>Tin</span></li>
  <li data-pos="51" data-nb="121.76" class="type-5 cat-1">Sb<span>Antimony</span></li>
  
  <li data-pos="52" data-nb="127.60" class="type-5 cat-1">Te<span>Tellurium</span></li>
  <li data-pos="53" data-nb="126.90" class="type-9 cat-1">I<span>Iodine</span></li>
  <li data-pos="54" data-nb="131.29" class="type-2 cat-1">Xe<span>Xenon</span></li>
  
  <!-- ROW 6 -->
  
  <li data-pos="55" data-nb="132.91" class="type-3 cat-1">Cs<span>Caesium</span></li>
  <li data-pos="56" data-nb="137.33" class="type-4 cat-1">Ba<span>Barium</span></li>
  <li data-pos="57-71" class="type-8"><span>Lanthanides</span></li>
  <li data-pos="72" data-nb="178.49" class="type-6 cat-1">Hf<span>Hafnium</span></li>
  <li data-pos="73" data-nb="180.95" class="type-6 cat-1">Ta<span>Tantalum</span></li>
  
  <li data-pos="74" data-nb="183.64" class="type-6 cat-1">W<span>Tungsten</span></li>
  <li data-pos="75" data-nb="186.21" class="type-6 cat-1">Re<span>Rhenium</span></li>
  <li data-pos="76" data-nb="190.23" class="type-6 cat-1">Os<span>Osmium</span></li>
  <li data-pos="77" data-nb="192.22" class="type-6 cat-1"><span>Iridium</span></li>
  <li data-pos="78" data-nb="195.08" class="type-6 cat-1">Pt<span>Platinum</span></li>
  
 <li data-pos="79" data-nb="196.97" class="type-6 cat-1">Au<span>Gold</span></li>
  <li data-pos="80" data-nb="200.59" class="type-6 cat-1">Hg<span>Mercury</span></li>
  <li data-pos="81" data-nb="204.38" class="type-7 cat-1">Tl<span>Thallium</span></li>
  <li data-pos="82" data-nb="207.2" class="type-7 cat-1">Pb<span>Lead</span></li>
  <li data-pos="83" data-nb="208.96" class="type-7 cat-1">Bi<span>Bismuth</span></li>
  
  <li data-pos="84" data-nb="(209)" class="type-7 cat-1">Po<span>Polonium</span></li>
  <li data-pos="85" data-nb="(210)" class="type-9 cat-1">At<span>Astatine</span></li>
  <li data-pos="86" data-nb="(222)" class="type-2 cat-1">Rn<span>Radon</span></li>
  
  <!-- ROW 7 -->
  
  <li data-pos="87" data-nb="(223)" class="type-3 cat-1">Fr<span>Francium</span></li>
  <li data-pos="88" data-nb="(226)" class="type-4 cat-1">Ra<span>Radium</span></li>
  <li data-pos="89-103" class="type-10"><span>Actinides</span></li>
  <li data-pos="104" data-nb="(261)" class="type-6 cat-1">Rf<span>Rutherfodum</span></li>
  <li data-pos="105" data-nb="(262)" class="type-6 cat-1">Db<span>Dubnium</span></li>
  
  <li data-pos="106" data-nb="(266)" class="type-6 cat-1">Sg<span>Seaborgium</span></li>
  <li data-pos="107" data-nb="(264)" class="type-6 cat-1">Bh<span>Bohrium</span></li>
  <li data-pos="108" data-nb="(277)" class="type-6 cat-1">Hs<span>Hassium</span></li>
  <li data-pos="109" data-nb="(268)" class="type-6 cat-1">Mt<span>Meitnerium</span></li>
  <li data-pos="110" data-nb="(281)" class="type-6 cat-1">Ds<span>Damstadium</span></li>
  
  <li data-pos="111" data-nb="(272)" class="type-6 cat-1">Rg<span>Roentgenium</span></li>
  <li data-pos="112" data-nb="(268)" class="type-6 cat-1">Cn<span>Copernicium</span></li>
  <li data-pos="113" data-nb="(286)" class="type-7 cat-1">Nh<span>Nihonium</span></li>
  <li data-pos="114" data-nb="(289)" class="type-7 cat-1">Fl<span>Flerovium</span></li>
  <li data-pos="115" data-nb="(289)" class="type-7 cat-1">Mc<span>Moscovium</span></li>
  
  <li data-pos="116" data-nb="(293)" class="type-7 cat-1">Lv<span>Livermorium</span></li>
  <li data-pos="117" data-nb="(294)" class="type-9 cat-1">Ts<span>Tennessine</span></li>
  <li data-pos="118" data-nb="(294)" class="type-2 cat-1">Og<span>Oganesson</span></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li data-pos="57" data-nb="138.91" class="type-8 cat-1">La<span>Lanthumum</span></li>
  <li data-pos="58" data-nb="140.12" class="type-8 cat-1">Ce<span>Cerium</span></li>
  <li data-pos="59" data-nb="140.91" class="type-8 cat-1">Pr<span>Praseodymium</span></li>
  <li data-pos="60" data-nb="144.24" class="type-8 cat-1">Nd<span>Neodimium</span></li>
  <li data-pos="61" data-nb="(145)" class="type-8 cat-1">Pm<span>Promethium</span></li>
  <li data-pos="62" data-nb="150.36" class="type-8 cat-1">Sm<span>Samarium</span></li>
  <li data-pos="63" data-nb="151.96" class="type-8 cat-1">Eu<span>Europium</span></li>
  <li data-pos="64" data-nb="157.25" class="type-8 cat-1">Gd<span>Gadolinium</span></li>
  <li data-pos="65" data-nb="158.93" class="type-8 cat-1">Tb<span>Terbium</span></li>
  <li data-pos="66" data-nb="162.50" class="type-8 cat-1">Dy<span>Dysprosium</span></li>
  <li data-pos="67" data-nb="164.93" class="type-8 cat-1">Ho<span>Holmium</span></li>
  <li data-pos="68" data-nb="167.26" class="type-8 cat-1">Er<span>Erbium</span></li>
  <li data-pos="69" data-nb="168.93" class="type-8 cat-1">Tm<span>Thulium</span></li>
  <li data-pos="70" data-nb="173.04" class="type-8 cat-1">Yb<span>Ytterbium</span></li>
  <li data-pos="71" data-nb="174.97" class="type-8 cat-1">Lu<span>Lutetium</span></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li data-pos="89" data-nb="(227)" class="type-10 cat-1">Ac<span>Actinium</span></li>
  <li data-pos="90" data-nb="232.04" class="type-10 cat-1">Th<span>Thorium</span></li>
  <li data-pos="91" data-nb="231.04" class="type-10 cat-1">Pa<span>Protactinium</span></li>
  <li data-pos="92" data-nb="238.03" class="type-10 cat-1">U<span>Uranium</span></li>
  <li data-pos="93" data-nb="(237)" class="type-10 cat-1">Np<span>Neptunium</span></li>
  <li data-pos="94" data-nb="(244)" class="type-10 cat-1">Pu<span>Plutonium</span></li>
  <li data-pos="95" data-nb="(243)" class="type-10 cat-1">Am<span>Americium</span></li>
  <li data-pos="96" data-nb="(247)" class="type-10 cat-1">Cm<span>Curium</span></li>
  <li data-pos="97" data-nb="(247)" class="type-10 cat-1">Bk<span>Berkelium</span></li>
  <li data-pos="98" data-nb="(251)" class="type-10 cat-1">Cf<span>Californium</span></li>
  <li data-pos="99" data-nb="(252)" class="type-10 cat-1">Es<span>Einsteinium</span></li>
  <li data-pos="100" data-nb="(257)" class="type-10 cat-1">Fm<span>Fermium</span></li>
  <li data-pos="101" data-nb="(258)" class="type-10 cat-1">Md<span>Mendelevium</span></li>
  <li data-pos="102" data-nb="(259)" class="type-10 cat-1">No<span>Nobelium</span></li>
  <li data-pos="103" data-nb="(262)" class="type-10 cat-1">Lr<span>Lawrencium</span></li>
</ul>
  
<div class="legend">
<p align="center"><b>Periodic Table of Elements</b></p>
  <ul class="list-2">
    <li class="type-4">Alkaline earth metals</li>
    <li class="type-3">Alkalai metals</li>
    <li class="type-5">metalloids</li>
    <li class="type-7">Post-transition metals</li>
    <li class="type-8">Lanthanides</li>
    <li class="type-1">Other non-metals</li>
    <li class="type-10">Actinides</li>
    <li class="type-9">Halogens</li>
    <li class="type-6">Transition metals</li>
    <li class="type-2">Noble gases</li>
    <li class="type-0">Unknown</li>
  </ul>
</div>

</div>

<style>
     * { box-sizing: border-box; padding:0; margin:0; }

body {
  background:linear-gradient(#dbeaf8, #dbeaf8);
  color:#222;
    padding: 20px;
  font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
}

.wrapper {
     width:1050px;
  margin:30px auto;
  position:relative;
} 

.main:after {
     clear:both;
  content:"";
  display:table;
}
 
.main li {
     width:56px;
  height:60px;
  border:1px solid rgba(0,0,0,0.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
  position:relative;
  font-size:18px;
  float:left;
  padding:0 2px;
  margin:1px;
  cursor:pointer;
  padding-top:20px;
  overflow:hidden;
  transition:all .2s ease-in;
  text-shadow:0 1px 0 rgba(255,255,255,0.2);
  text-align:center;
}

.main li span {
  display:block;
  line-height:1;
  font-size:9px;
  color:black; 
  padding-top:7px;
}

.main .empty {
     border:none; 
  box-shadow:none;
  cursor:default;
}

.deactivate {
     opacity:0.5;
  -webkit-filter:grayscale(70%);
  filter:grayscale(70%);
}

.main li:before,
.main li:after {
     content:attr(data-pos);
  position:absolute;
  top:3px;
  left:3px;
  color:black;
  font-size:8px;
  line-height:1;
}

.main li:after {
  content:attr(data-nb);
  left:auto;
  right:3px;
}

.main li:hover {
     transform:scale(2);
  z-index:100;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
} 

.main .empty:hover {
     box-shadow:none;
  transform:none;
}

.type-0 { background:#fff; }
.type-1 { background:#6495ed; }
.type-2 { background:#a8bffa; }
.type-3 { background:#ffd700; }
.type-4 { background:#cdbe70; }
.type-5 { background:#3bd93b; }
.type-6 { background:#3CB371; }
.type-7 { background:#b0c4de; }
.type-8 { background:#ffaa88; }
.type-9 { background:#97ffff; }
.type-10 { background:#ff4040;}

.cat-1 { color:#000000; }

.legend {
     position:absolute;
  top:0;
  left:20%;
  padding:10px;
  font-size:11px;
  background:#f1edec;
  border:1px solid rgba(0,0,0,0.2);
  border-radius:15px;
  box-shadow:
    inset 0 1px 1px white,
    inset 0 -5px 3px #dddcdb,
    0 0 10px rgba(0,0,0,0.2);
}

.legend:after {
     content:"";
  display:table;
  clear:table;
}

.legend ul { float:left; list-style: none; }

.legend .list-2 {
     margin-left:40px; 
  width:300px;
}

.legend .list-2 li {
  margin:2px;
  padding:3px;
     float:left; 
  border:1px solid rgba(0,0,0,0.2);
  width:48%;
  cursor:pointer;
}
</style>

<script>
    
    // Created by ProgrammSom ©®

 $(function(){
    $('li[class^="type-"]').mouseover(function(){
      var currentClass = $(this).attr('class').split(' ')[0];
      if(currentClass != 'empty'){
          $('.main > li').addClass('deactivate');
          $('.' + currentClass).removeClass('deactivate');
      }
    });
   
   $('li[class^="cat-"]').mouseover(function(){
      var currentClass = $(this).attr('class').split(' ')[0];
          $('.main > li').addClass('deactivate');
          $('.' + currentClass).removeClass('deactivate');
    }); 
    
    $('.main > li').mouseout(function(){
      var currentClass = $(this).attr('class').split(' ')[0];
       $('.main > li').removeClass('deactivate');
    }); 
 
}); 

</script>