Instead of using the w3-brand-brandName class, use the w3-brand-hover-brandName class to add a hover effect.
<!DOCTYPE html>
<head>
<title>Brands.CSS Showcase</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../brands.css">
</head>
<div class="w3-card-4">
<header class="w3-container w3-brand-facebook">
<h1>Facebook</h1>
</header>
<div class="w3-container">
<p>Facebook is a social networking service launched on February 4, 2004, operated and privately owned by Facebook, Inc. As of April 2016, Facebook was the most popular social networking site in the world, with more than 1.86 billion monthly active users.</p>
</div>
<footer class="w3-container w3-brand-hover-facebook">
<h5>Find out more</h5>
</footer>
</div>
<!DOCTYPE html>
<head>
<title>Brands.CSS Showcase</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../brands.css">
</head>
<body>
<header class="w3-container w3-border w3-center w3-pale-blue">
<h1>My Website</h1>
</header>
<div class="w3-container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, quos. Culpa doloremque, incidunt illum, excepturi magnam quidem illo recusandae, non distinctio explicabo mollitia. Expedita, ipsum. Doloribus autem soluta at et quia consectetur, sunt, sequi commodi velit harum, hic quos quo! Porro dolores assumenda sunt laborum, quia corrupti impedit cumque nobis.</p>
<p>
Like what you see? Please consider
sharing my content with your friends and family.
</p>
<div class="w3-bar">
<a class="w3-bar-item w3-button w3-brand-facebook">
<i class="fa fa-facebook"></i> Facebook
</a>
<a class="w3-bar-item w3-button w3-brand-twitter">
<i class="fa fa-twitter"></i> Twitter
</a>
</div>
</div>
</body>
<!DOCTYPE html>
<head>
<title>Brands.CSS Showcase</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../brands.css">
</head>
<body>
<header class="w3-container w3-border w3-center w3-green">
<h1>My Website</h1>
</header>
<div class="w3-container">
<p>My website is Sponsored by:
<span class="w3-padding w3-brand-reddit">
Reddit
</span>
</p>
</div>
<div class="w3-container">
<p>Like my page on
<span class="w3-padding w3-brand-facebook">
Facebook
</span>
</p>
</div>
<div class="w3-container">
<p>Follow me on
<span class="w3-padding w3-brand-twitter">
Twitter
</span>
</p>
</div>
<div class="w3-container">
<p>
<b>NOTE:</b> This is a fictional scenario, and is not intended to imply that Reddit is sponsoring this website, github repository, or any LexianDEV branding, resources, of any kind, shape or form. We are NOT sponsored by any corporate organization, and this is purely for educational, and demonstration purposes only.
</p>
</div>
</body>
We have decided to make BRANDS.CSS completely open source and editable
by everybody. This means that you can contribute to the project by adding new brands, or editing existing
ones. We have also made it easy to add new brands.
The project is licensed under the MIT License, which means that you can use it in any project, commercial or
otherwise, without any restrictions.
It is also completely free to use, and we will never charge you for using it.
We also provide easy instructions on how to import your own brands, or create brands
for the repository. For more information, please visit the The Github ReadMe.
We appreciate the support and hope you enjoy using BRANDS.CSS!