Social Media Bar

script.js

document.querySelectorAll("div").forEach((el) => {
  el.addEventListener("mouseenter", function (e) {
    e.target.querySelector("i").style.display = "inline";
    e.target.style.paddingTop = "15px";
    switch (e.target.id) {
      case "one":
        e.target.style.backgroundColor = "#1da1f2";
        break;
      case "two":
        e.target.style.backgroundColor = "#3b5998";
        break;
      case "three":
        e.target.style.backgroundColor = "#24292e";
        break;
      case "four":
        e.target.style.backgroundColor = "#0072b1";
        break;
      case "five":
        e.target.style.backgroundColor = "#E1306C";
        break;
      case "six":
        e.target.style.backgroundColor = "#c4302b";
        break;
    }
  });
  el.addEventListener("mouseleave", function (e) {
    e.target.style.paddingTop = "0px";
    e.target.querySelector("i").style.display = "none";
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js"></script>

Social media bar

  <h3>Hover/touch to discover</h3>
  <main>

    <div id="one"><a href="#"><i class="fab fa-twitter hidden"></i></a></div>
    <div id="two"><a href="#"><i class="fab fa-facebook hidden"></i></a></div>
    <div id="three"><a href="#"><i class="fab fa-github hidden"></i></a></div>
    <div id="four"><a href="#"><i class="fab fa-linkedin hidden"></i></a></div>
    <div id="five"><a href="#"><i class="fab fa-instagram hidden"></i></a></div>
    <div id="six"><a href="#"><i class="fab fa-youtube hidden"></i></a></div>
  </main>
  <h4>Social media bar &copy; Andrei Swishyfishie 2020</h4>

  <script src="https://kit.fontawesome.com/72e4802971.js" crossorigin="anonymous"></script>

social-media-bar.markdown

Social Media Bar

A Pen by Claudiu Andrei on CodePen.

License.

style.scss

main {
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

div {
  &#one,
  &#two,
  &#three,
  &#four,
  &#five,
  &#six {
    height: 10px;
    width: 50px;
    background-color: lightgrey;
    transition: height 0.2s;
    text-align: center;
    &:hover {
      height: 50px;
    }
    a {
      text-decoration: none;
    }
    i {
      height: 100%;
      display: none;
      color: whitesmoke;
    }
  }
}