How to display (fade in a portion of an image) using .SVG

I have the following code in my DOM:

<div class="icon-animated"><img src="icon_non_active.svg" id="icon_non_active"></div>

There are two icons (.svg) available:

icon_non_active & icon_active

Can I animate the transformation from icon_non_active to icon_active and remain in the active icon state (where it has one more circle)?

?

I attempted to use this plugin

but it appears that it's not suitable for my situation...

Here are the links to these icons:

How can I fadeIn this red area?

Answer №1

If you want to create a cool effect of elements overlapping each other, you can make use of opacity to show the active state. You just need two slightly different images and some CSS magic.

Take a look at this code snippet:

.icon-animated {
  position:relative;
}
.icon-animated img {
  position:absolute;
  top:0;
  left:0;
}
#icon_active {
  transition:opacity 1s linear;
  opacity:0;
}
.icon-animated:hover #icon_active {
  opacity:1;
}
<div class="icon-animated">
  <img src="https://dl.dropboxusercontent.com/u/59666091/svg/icon_non_active.svg" id="icon_non_active">
  <img src="https://dl.dropboxusercontent.com/u/59666091/svg/icon_active.svg" id="icon_active">
</div>

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

What are the key benefits of opting for flexbox over solely relying on display: inline?

While it may be more convenient to use flexbox over older concepts like display: inline; float: right When comparing simply adding a container and using display: flex; versus changing each element inside the container to display: inline;, what are the be ...

Having trouble with your Javascript Ajax call?

I've been attempting to make a POST request using Ajax, but I keep encountering an error with status code 0. Strangely, all the request parameters seem to be functioning correctly in the Advanced REST Client. Here's My Code Snippet: <button& ...

Is there a way for me to insert a hook into the DOM after a promise has finished updating

Currently, I am tasked with maintaining a code snippet that resembles the following structure: {#await details} {#each values as value, i} <td id="{`${config.id}_${i}`}">{value}</td> {/each} {:then details_result} {#each de ...

Decide on the chosen option within the select tag

Is there a way to pre-select an option in a combobox and have the ability to change the selection using TypeScript? I only have two options: "yes" or "no", and I would like to determine which one is selected by default. EDIT : This combobox is for allow ...

Processing of an array received via AJAX and passed to a PHP script, inside a separate function in a different file

I have a JavaScript array that I am sending via AJAX to a PHP file named aux.php. What I want is for this array to be visible and manipulable within a function inside a class in another PHP file called payments.php. I've provided all the code so they ...

What is the best way to incorporate audio playback while browsing files on an HTML5 webpage with TypeScript?

<input type="file" id="soundUrl" (change)="onAudioPlay()" /> <audio id="sound" controls></audio> This is the HTML code I'm working with, and I'm looking to trigger audio playback after a user selects an MP3 file using TypeScrip ...

What is the best way to retrieve and display a well-structured JSON object in a Node

I am currently working on setting up a nodejs server with the following code: var http = require('http'); var port = 1337; http.createServer(function(req, res) { var statusList = { "hasErrors": false, "list" : [ { "id": " ...

If I type too quickly in the input field, it ends up displaying the incorrect div

I need to display two different dropdowns in my input field. To achieve this, I am using a method called shouldShowWarningBox that gets triggered every time the user updates the input and updates the value of showWarningBox accordingly. However, when I typ ...

Ways to expand CRA ESLint guidelines using the EXTEND_ESLINT environmental variable

Facebook's Create React App (CRA) recently introduced a new feature allowing users to customize the base ESLint rules. Recognizing that some cases may require further customization, it is now possible to extend the base ESLint config by setting the ...

Navigating - Utilizing dot-notation to reach the top-level function in Express

If we want to use express in a basic javascript file, all we need to do is add the following two lines of code at the beginning (after installing it through npm): var foo = require('express'); var app = foo(); According to the express API guide ...

Using an ellipsis in a hyperlink within a list item conceals the bullet points of the list

When I apply an ellipsis to the text within a list element that has disc bullet points, it hides the bullet point itself. I discovered that applying overflow: hidden to the list will also hide the bullet point. Moving this rule to the anchor within the li ...

Is there a way to create a button in an HTML project that will launch the user's email client?

Looking for some guidance on coding a homepage with HTML and CSS as I navigate my way through the world of web development. Take a look at this screenshot for reference: In the Jumbotron section, you'll notice that I have integrated a couple of boot ...

Choosing between classes and styles for styling components in ReactJS

Can you explain why the call to the classes object works in the code below, rather than to the styles object defined as a const at the beginning? For instance, take a look at this demo: className={classes.button} The above line functions correctly. Howe ...

Tips for utilizing an adaptive design with Angular

I am working on designing a page that allows for scrolling if needed. On each section of the page, I will be incorporating specific components with unique colors to enhance the layout. However, my current HTML code is not producing the desired result as sh ...

"Is it possible to draw on top of a canvas element that's already been

I'm currently working with an OpenLayers map that includes WMS layers with time steps. My goal is to create a loop that updates the time for each step and then saves the image once it's rendered. I've been referencing the example code from t ...

Ensure that background elements do not become the focus when using MUI backdrop

Currently, we are implementing screen dimming when a custom dialog is open using MUI backdrop. However, even though the screen is "grayed-out," users can still access the items with the keyboard. In the image below, you can see how I move from "show backd ...

What is the correct way to display a URL in Jupyter Lab?

This is a direct link for searching the keyword "google" on google.com: https://www.google.com/search?q=google&rlz=1C1CHBD_elGR899GR899&oq=google&aqs=chrome..69i57j69i60l4j69i65l2j69i60.1647j0j7&sourceid=chrome&ie=UTF-8 When I run the ...

Instructions on using $.post in jquery to sude uploaded file to a php file for processing

Is there a way to upload photos asynchronously using $.post without relying on .serializeArray()? I want to send a form, containing an upload file, to a PHP processing file. Any suggestions? HTML: <form action="upload1.php" method="post" id="usrform" ...

What is the best way to automatically close a parent popup window when the child popup is

Currently, I am developing a web application using Angular that requires managing nested popups. Specifically, in my scenario, I initiate Popup 1 and from within that popup, I trigger another popup (Popup 2) upon clicking "delete." My goal is to ensure tha ...

Responsive design involves ensuring that web elements such as divs are properly aligned

I am currently working on aligning 2 divs in a specific way that is responsive. I would like the right div to stack on top of the left div when the screen width reaches a certain point, as opposed to them both taking up 50% of the container's width. ...