преобразовать масштаб границы при наведении css с bootstrap 4

Question

Я хочу увеличить эту ссылку, наведя на нее курсор. вот так демо .

.navbar {
  padding: 0 1rem;
}

.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link {
  background-color: rgba(160, 0, 180, .5);
}

ul.navbar-nav>li>a {
  padding: 60px 0 16px;
  display: block;
  text-align: center;
  position: relative;
  min-width: 110px;
}

ul.navbar-nav>li>a>i {
  content: '';
  position: absolute;
  display: inline-block;
  width: 50%;
  height: 50%;
  top: 10px;
  padding-top: 10px;
  left: 0;
  font-size: 25px;
  right: 0;
  margin: 0 auto;
}

ul.navbar-nav>li.active>a>i {
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

ul.navbar-nav>li>a>i:hover {
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transform: scale(1);
}

ul.navbar-nav>li>a>span {
  font-size: 13px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="collapse navbar-collapse" id="navbarLogo">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">
        <i class="fas fa-th-large fa-2x"></i>
        <span>Home</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        <i class="fas fa-cube"></i>
        <span>Contact</span>
      </a>
    </li>
  </ul>
</div>

Answer 1

Если вы хотите увеличивать масштаб при наведении, присвойте css этому классу (например, классу масштабирования):

zoom:hover{
    background-color: grey;
    transform: scale(1.5);
}

Если вы хотите создать границу при наведении курсора, укажите css:

zoom:hover{
    border: solid 2px red;
}