Fade Effect on Bootstrap Icons

Is there a way to show the filled version of a bootstrap icon when hovering over it?

Here is the code I have:

<svg
  width="80px"
  height="80px"
  viewBox="0 0 16 16"
  class="bi bi-cloud-plus"
  fill="#5cb85c"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    fill-rule="evenodd"
    d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"
  />
  <path
    fill-rule="evenodd"
    d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 .5-.5z"
  />
</svg>

(cloud plus icon) and I'm looking for a way to combine it with its filled counterpart (cloud plus fill icon). Any suggestions on how to do this?

htmlcsstwitter-bootstrapbootstrap-4bootstrap-icons

Answer №1

Typically, achieving this involves:

  1. Adding both elements in your markup (the filled and non-filled versions) within a common parent.
  2. Hiding the fill version using CSS
  3. Swapping the CSS on :hover of the parent to hide the non-filled version and display the filled version.

Refer to the code snippet below:

.icon-wrapper .bi-cloud-plus-fill {
  display: none;
}

.icon-wrapper:hover .bi-cloud-plus-fill {
  display: inline;
}

.icon-wrapper:hover .bi-cloud-plus {
  display: none;
}
<div class="icon-wrapper">
  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-cloud-plus" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd"...

To create a transition between them can be a bit more complex as it requires positioning tricks. The parent needs to have position: relative; so that the children can be positioned absolutely to overlap. Instead of using display, we use opacity for showing/hiding, and include a transition for the opacity property:

.icon-wrapper {
  position: relative
  display: inline-block;
  height: 1em;
  width: 1em;
  font-size: 36px;
}

.icon-wrapper .bi {
  position: absolute;
... 
<div class="icon-wrapper">
  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-cloud-plus" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd"...

One additional consideration-- these SVGs may not be very accessible on their own. You might want to utilize Bootstrap screen reader utilities to provide accessible text for users who rely on assistive technologies to navigate your site.

Answer №2

To create a dynamic effect, you can utilize the mouseenter and mouseleave events. Modify the innerHTML of the icon based on whether it is being hovered over or not.

 
document.getElementById('cloud-plus').addEventListener('mouseenter', function() {
  this.innerHTML = `<path fill-rule="evenodd" d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm.5 4a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V10a.5.5 0 0 0 1 0V8.5H10a.5.5 0 0 0 0-1H8.5V6z"/>`
})

document.getElementById('cloud-plus').addEventListener('mouseleave', function() {
  this.innerHTML = `<path fill-rule="evenodd" d="M4.406 3.342A5.53 5.53 0 0 1 8 2c- add more unique content here -"/>`
})
<svg id="cloud-plus" width="80px" height="80px" viewBox="0 0 16 16" class="bi bi-cloud-plus" fill="#5cb85c" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="- add more unique content here -" />
  <path fill-rule="evenodd" d="- add more unique content here -" />
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting tips for resolving encoding issues during XML to JSON conversion

I am currently working with an XML file and I need to convert it into JSON format using Node.js and then display it in HTML. Below is the content of the XML file: <?xml version="1.0" encoding="windows-1251" ?> <ROWDATA> &l ...

javascripthtmlnode.jsjsonxml

Dealing with CSS specificity issues when incorporating material-ui for React into a WordPress plugin

Struggling to integrate material-ui for react in a wordpress plugin due to conflict with wordpress's styling in forms.css file. Looking for a solution that doesn't require complete restyling of material-ui components to override the default style ...

cssreactjswordpressmaterial-uicss-specificity

The formatting for a class that was added using ClassList isn't functioning as expected

Despite my code appearing correct, the styles are not being applied even though the class is added. It was functioning perfectly before, so I'm not sure what caused this issue now. Any assistance would be greatly appreciated! JavaScript code: let max ...

javascriptcss

Using JavaScript to identify when a page is scrolling with smooth scrolling behavior and phasing out the scroll event for this purpose

My web page has a scroll event triggered by scrolling, but it also has links that smoothly scroll the content using scroll-behavior: smooth. I want to ensure that the scroll event only executes when scrolling occurs and not when a link is clicked. Below i ...

javascripthtml

Card flip animation using RotateY is experiencing delays in loading

While experimenting with jQuery and CSS3 animations, I encountered a strange issue. When hovering over the card or focusing on the CCV field in my pen, there is a delay in the color transition when the card flips over. It almost seems like it's loadin ...

jqueryhtmlcsscss-transforms

Create a unique custom design for your Mapbox GL control

When developing the website, we utilized Angular 8, Typescript, and SCSS. We are using mgl-map to display a map, and I wanted to create a custom control for it with unique styles. I added the custom control to the map using: const centerOnCoordinatesC ...

cssangulartypescriptsassmapbox-gl

What is the best way to eliminate the indent on both sides of every blog post?

I'm currently using Tumblr and I want to remove the indentation on either side of each blog post. Ideally, I would like the width of the posts to be 100%. Thank you in advance for any help. The website I am working on can be found at . <!DOCTYPE h ...

htmlcsshtml-listsblogstumblr

Generate fresh input fields with distinct identifiers using JavaScript

My challenge is to dynamically create new empty text boxes in JavaScript, each with a unique name, while retaining the text entered in the previous box. I struggled with this for a while and eventually resorted to using PHP, but this resulted in unnecessar ...

javascriptphpjqueryhtml

Focusing on a specific element within two nested div containers

Dealing with WordPress can be frustrating at times, especially when trying to style a menu that is auto-generated by the platform. Here is the basic HTML structure: <div class="footer"> <!--Generated By Wordpress--> <ul class="menu"> ...

htmlcsswordpress

In JavaScript, I would like to be able to input an end date and have the program calculate and display the number of days remaining until the deadline

I'm working on a school project that involves JavaScript code. I'm struggling with converting a date prompt from string to number format. As a beginner in JavaScript, I could really use some guidance. <script> enddate = prompt('Wh ...

javascripthtml

Angular child component displaying of table data is not looping properly

Currently, I am using Angular 13 along with Bootstrap 3 to develop an application that consists of two main components: form-component (dedicated to inputting user details) and list-component (designed to showcase all data in a table format). Within the HT ...

javahtmlangulartypescript

Guide to "flashing" an image momentarily on the screen using PHP

I'm looking for a way to display an image on my simple website for 3 seconds and then prompt the user to indicate if they recognized the image or not by clicking a button. I don't need help with the button, just how to create the timer. While I ...

phpjqueryhtmlimagetimer

Tips for integrating ng2-dragula into an Angular 2 project

How can ng2-dragula be implemented in Angular 2? Here's the code snippet, ****viewer.component.ts**** import { Component, Input, Output, EventEmitter } from '@angular/core'; import { Injectable } from '@angular/core'; import { ...

htmlangular

Unable to append Jquery attribute to a div component

My code snippet is creating a div with specific classes and elements: '<div class="ctrl-info-panel col-md-12 col-centered">'+ '<h2>You do not have any projects created at the moment.</h2>'+ '<div id="t ...

javascriptjqueryhtmlcss

What is the best way to run a JavaScript function once another function has finished executing?

I am looking to ensure that a JavaScript function runs only after another one has finished executing. Here is the code I currently have: $(window).load(function(){ $('#dvLoading').fadeOut(2000); }); window.addLoadEvent = function() { $('#p ...

javascripthtmlexecute

Click on the input field to automatically choose files or folders

I am currently working on a project where I am using a combination of javascript and html to dynamically load a file in the browser. Here is what my code looks like: <input type="file" id="file-input" @input="openFile" /&g ...

javascripthtmlnode.js

Form validation using JQuery within a Bootstrap 4 modal incorporating tabs is preventing submission

Encountering a challenge with JQuery Validation within a modal that contains tabs. When I'm on the Sign-in Tab and click the Login button, the validation errors display correctly: https://i.sstatic.net/caReK.jpg ISSUE 1 However, on the New Account ...

javascriptjqueryvalidationbootstrap-4jquery-validation-engine

Create an animation where an element glides smoothly over the others, extending to a specific width

How can I make a table of headings stretch to the width of the table and then slide down over the others when one of the headings is clicked? I want the heading to return to its original state when clicked again or when another heading is clicked. Here&ap ...

javascriptjqueryhtmljquery-animate

Tips for disabling scrolling on a <div> using another <div> as a lock

I am facing an issue with a page where a div is appended to the body of an HTML. The problem is that there are two scrolls appearing - one on the new overlaying div and another behind it. Here is an approximate structure of the page, how can I ensure that ...

javascriptjqueryhtmlcss

When hovering over slick text, it becomes hidden because of non-responsive CSS. Are there any solutions to make it responsive?

I can't seem to get the on-hover dates to appear, even though they are rendered when inspecting the page. I suspect it could be related to a responsive CSS issue or class breaking. How can I resolve this? https://i.stack.imgur.com/jyEJb.png https:// ...

javascriptphphtmlcss