How to make text glow with hover?-CodePudding

i don't understand hover really well, can someone tell me how to hover this footer properly? i want the text to glow with hover but instead the hover is glowing not only the text. there's also a problem with some logo's for the facebook etc. this is the code i tried. also can someone drop a link for the logo's? i think i lost the link n that's why the logo's wont appear.

body {
  margin: 0;
  overflow-x: hidden;
}

.footer {
  background: #000;
  padding: 30px 0px;
  font-family: 'Play', sans-serif;
  text-align: center;
}

.footer .row {
  width: 100%;
  margin: 1% 0%;
  padding: 0.6% 0%;
  color: gray;
  font-size: 0.8em;
}

.footer .row a {
  text-decoration: none;
  color: gray;
  transition: 0.5s;
}

.footer .row a:hover {
  color: #fff;
}

.footer .row ul {
  width: 100%;
}

.footer .row ul li {
  display: inline-block;
  margin: 0px 30px;
}

.footer .row a i {
  font-size: 2em;
  margin: 0% 1%;
}

@media (max-width:720px) {
  .footer {
    text-align: left;
    padding: 5%;
  }
  .footer .row ul li {
    display: block;
    margin: 10px 0px;
    text-align: left;
  }
  .footer .row a i {
    margin: 0% 3%;
  }
}

<footer>
  <div >
    <div >
      <a href="#"><i ></i></a>
      <a href="#"><i ></i></a>
      <a href="#"><i ></i></a>
      <a href="#"><i ></i></a>
    </div>

    <div >
      <ul>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Our Services</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">Terms & Conditions</a></li>
        <li><a href="#">Career</a></li>
      </ul>
    </div>

    <div >
      Company name || lorem
    </div>
  </div>
</footer>

CodePudding user response：

I think you could use text-shadow. That's how I did it to glow green-ish :

text-shadow: 0 0 7px rgb(190 254 194), 0 0 122px rgb(173 236 175);

You can just add it to the hover pseudoclass

Hope it's help!

CodePudding user response：

You might be missing the dependency required for the visibility of your logo. As your code seems to be using "Font awesome" kindly use its CDN or install it in your project then it will work fine. Link to font awesome - https://fontawesome.com/v4/get-started/

And changing color when we are hovering text seems to be fine with your code snippet.