The red solid outline of 1px is not functional when attempting to enlarge on hover

Question

The red solid outline of 1px is not functional when attempting to enlarge on hover

Recently, I stumbled upon a PSD design that really caught my eye.

https://i.sstatic.net/R46Ko.jpg

It inspired me to create a website similar to . One feature I particularly liked was how a circle appeared when hovering over a link. Plus, I plan on using Bootstrap 4.5 for this project.

Here's the CSS snippet I'm considering:

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

/* Additional CSS code here */

I also found a simple HTML example that aligns perfectly with what I have in mind:

<li class="nav-item active">
    <a class="nav-link" href="#">
        <i class="fas fa-th-large fa-2x"></i>
        <span>Home</span>
    </a>
</li>

For further inspiration, I checked out this demo as well:

https://i.sstatic.net/SoXI1.png

html css bootstrap-4

Answer 1

Answer №1

To create a circular border around an icon when hovering over a button, you can use CSS pseudo classes. By adding a hover psuedo class to the button and setting a border-radius of 50% along with a border on the icon, you can achieve this effect. In the provided example, a span tag is used for the icon: ul li a:hover span:first-of-type. When hovering over the 'a' tag, the span:first-of-type, which represents the icon, will be affected. Some adjustments may be needed in your CSS, but hopefully, you get the idea of how this can be implemented using CSS hover effects.

For animation, include the @keyframes rule in your CSS for the pseudo element. In this example, two animations are added with the same duration - one for the 'a' tag's background-color and color, and another for the pseudo element ':after' using the 'opacity' property. The ':after' pseudo element allows the original image icon to remain visible without being impacted by the opacity setting during the animation.

* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  width: 100px;
  border-radius: 10px 10px 0 0;
}

ul li a:hover {
  animation: fadebg 0.8s ease-in-out;
  background-color: #800080;
  color: #FFF;
}

@keyframes fadebg {
  from {
    color: #000;
    background-color: #FFF;
  }
  to {
    color: #FFF;
    background-color: #800080;
  }
}

ul li a span:last-of-type {
  margin-top: 5px;
}

ul li a:hover span:first-of-type:after {
  content: '';
  animation: fadein 0.8s ease-in-out;
  width: 50px;
  height: 50px;
  position: absolute;
  border: 1.5px solid white;
  border-radius: 50%;
  align-content: center;
  left: 32px;
  padding: 2px;
  opacity: 1;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.icon {
  width: 50px;
  height: 50px;
}

li span {
  display: block;
}

li {
  list-style-type: none;
}

<ul>
  <li class="nav-item active">
    <a class="nav-link" href="#">
      <span><img class="icon" src="https://cdn2.iconfinder.com/data/icons/minimal-set-two/32/minimal-39-128.png"></span>
      <span>Home</span>
    </a>
  </li>
</ul>

Answer 2

To create a circular border around an icon when hovering over a button, you can use CSS pseudo classes. By adding a hover psuedo class to the button and setting a border-radius of 50% along with a border on the icon, you can achieve this effect. In the provided example, a span tag is used for the icon: ul li a:hover span:first-of-type. When hovering over the 'a' tag, the span:first-of-type, which represents the icon, will be affected. Some adjustments may be needed in your CSS, but hopefully, you get the idea of how this can be implemented using CSS hover effects.

For animation, include the @keyframes rule in your CSS for the pseudo element. In this example, two animations are added with the same duration - one for the 'a' tag's background-color and color, and another for the pseudo element ':after' using the 'opacity' property. The ':after' pseudo element allows the original image icon to remain visible without being impacted by the opacity setting during the animation.

* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  width: 100px;
  border-radius: 10px 10px 0 0;
}

ul li a:hover {
  animation: fadebg 0.8s ease-in-out;
  background-color: #800080;
  color: #FFF;
}

@keyframes fadebg {
  from {
    color: #000;
    background-color: #FFF;
  }
  to {
    color: #FFF;
    background-color: #800080;
  }
}

ul li a span:last-of-type {
  margin-top: 5px;
}

ul li a:hover span:first-of-type:after {
  content: '';
  animation: fadein 0.8s ease-in-out;
  width: 50px;
  height: 50px;
  position: absolute;
  border: 1.5px solid white;
  border-radius: 50%;
  align-content: center;
  left: 32px;
  padding: 2px;
  opacity: 1;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.icon {
  width: 50px;
  height: 50px;
}

li span {
  display: block;
}

li {
  list-style-type: none;
}

<ul>
  <li class="nav-item active">
    <a class="nav-link" href="#">
      <span><img class="icon" src="https://cdn2.iconfinder.com/data/icons/minimal-set-two/32/minimal-39-128.png"></span>
      <span>Home</span>
    </a>
  </li>
</ul>

The red solid outline of 1px is not functional when attempting to enlarge on hover

Answer №1

Similar questions

The animation fails to function, both when hovering over and when not

Adjust size of item within grid component in VueJS

Can an element on a webpage be dynamically assigned an ID using JavaScript or PHP?

Guide to triggering a click event programmatically at specific x and y coordinates using JavaScript

What is the solution for resolving the "cannot resolve" issue in CSS for an Angular project?

Tips on adjusting the SVG view box for optimal visibility in a web browser

What is the best way to retrieve the input value from post.ejs?

Multi-select buttons using Bootstrap

How can I automatically disable certain checkboxes when a specific radio button is selected?

`Make Bootstrap 5 Modal centered horizontally`

Is there a way to verify the results of a Python script within a PHP webpage?

Angular Navigation Bar with Tab Elements

Is there a way to modify the browser's user agent using JavaScript or HTML?

Can Google Charts columns be customized with different colors?

StringBuilder has the ability to handle HTML symbols

Tips on extracting the image URL from a canvas element using Selenium in Java and leveraging JavascriptExecutor

Component that dynamically changes background images in Vue

I would like to terminate the property when processing it on a mobile device

Unable to identify the Xpath selector for the "Account settings button" and "find my iPhone" features within iCloud

The navigation bar and text subtly shift when displayed on various devices or when the window size is adjusted