I would like to smoothly fade in and out the text within the anchor tag, creating a subtle and gentle effect

My bootstrap navigation bar has icons that transition to text when hovered over, but the change is too abrupt. I would like it to appear more smoothly and gradually, similar to the effect on this website

This is an example of my HTML code:

    <nav class='navbar navbar-expand-lg navbar-dark'>
    <div class='container'>
        <a class='brandFont navbar-brand' href='/'>An's Resume</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
         <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
            <div class="navbar-nav">
            <div>
             <a class=" about nav-item nav-link" href="#"><span class='icon'><svg class='show'xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
  <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg></span> <span class='text'></span></a> 
                </div>


        <a class="projects nav-item nav-link" href=&quo...
        
<p>Here is a snippet of my CSS:</p>
<pre><code>     .about:hover .icon{
    display: none
}


.about .text::after{
    content: 'about';
    display: none;
    
}

.about:hover .text::after{
    display: block;
}

I attempted using transforms and transitions to achieve the desired effect, but was unsuccessful. Any guidance or assistance would be greatly appreciated!

javascripthtmlcssbootstrap-4

Answer №1

  1. To achieve overlapping of the icon and text, set position:relative on the icon wrapper (such as .description) and use position:absolute on the elements inside to adjust their positioning accordingly.
  2. For fade in/out transitions, consider using opacity instead of altering the display property.

I hope this information proves useful!

.description {
  position: relative; 
}

.description .text {
  position: absolute; 
  top: 0;
  left: 0;
}

.description .icon,
.description .text::after {
  display: block;
  transition: .2s;
}


.description:hover .icon {
  opacity: 0;
}


.description .text::after {
  content: 'description';
  opacity: 0;
}

.description:hover .text::after {
  opacity: 1;
}

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

Exploring a JavaScript function that triggers another function to create a new object - Utilizing Sinon and Mocha for testing purposes

I am currently working on a nodejs application where I need to write a test for a function that invokes another function to create a new object, and then calls a method of that object. Below is the code in service.js that I am trying to test; // servic ...

javascriptnode.jsunit-testingchaisinon

Ways to execute additional grunt tasks from a registered plugin

I am currently in the process of developing a custom Grunt plugin to streamline a frequently used build process. Normally, I find myself copying and pasting my GruntFile across different projects, but I believe creating a plugin would be more efficient. Th ...

javascriptnode.jsgruntjs

Arranging navigation links around a centrally positioned navigation brand using Bootstrap

Struggling to create a Navbar using bootstrap right now. The issue I'm facing is with centering the nav-links on both sides of the nav-brand. Here's my HTML code: <nav class="navbar navbar-expand-sm navbar-light "> <button class="na ...

htmlcssbootstrap-4

What is the best way to automatically post to Slack at regular intervals?

In order to provide users with the option to choose when they receive information from my API, such as daily at 5PM or every Friday at 5PM, I have a configuration page. Once users set their preferred time, I want to send them a Slack message at that specif ...

javascriptnode.jsexpressslack

Determining with jQuery if the right element has been successfully "dropped"

Imagine having 10 different draggable boxes and 2 droppable areas. You need to correctly match 5 boxes with droppable area 1 and the other 5 with droppable area 2. If a box intended for droppable area 1 is mistakenly dropped into area 2, it should not wor ...

javascriptphpjqueryhtmljquery-ui

Utilizing margins in CSS for various div elements

Update: I have included Javascript and Masonry tags in my project. Despite having modules of the same size, I am exploring how masonry can assist me. However, I find it a bit puzzling at the moment as I am not aiming to align elements of different sizes. I ...

javascriptcssjquery-masonry

You are unable to align a paragraph with a specific width in the center

I adjusted the width of a paragraph to make it less stretched out horizontally and more compact. However, when I attempted to center align the text within the paragraph using text-align: center;, only the direction of the paragraph was centered. The chall ...

htmlcss

Obtain the language of a Wordpress page using javascript

Is there a way to determine the language of a Wordpress page using Javascript? I have discovered a method to detect Spanish: if(window.location.href.indexOf("/es/") > -1) { However, if the website does not use Permalink Settings with "Post name", th ...

javascriptwordpresslocation

Tips for updating a JSON object value in Node.js

Storing a JSON object in a JSON file is important for passing data during an API call. To update the object, replace "it-goes-here" with the following {} block. Newly updated data: { "parenturl":"xxx.com", "user ...

javascriptnode.jsjsontypescriptobject

Encountering issues with updating state object in setState function

Review the code snippet below: {split.participants.map(friend => { return <div key={Math.random()} className="form-check my-2 d-flex align-items-center justify-content-between"> <div ...

javascriptreactjsmaterial-uifrontend

Tips for saving the ajax response to the browser cache using jquery

I am currently working on storing the ajax response in the browser cache. I have successfully managed to store it for URLs like (example.com), but now I am facing a challenge with storing data for URLs like (example.com?xyz=abc%20efg&mno=hjk). Here is ...

javascriptjqueryajaxcachingbrowser-cache

Having difficulty removing new or existing lines on StackBlitz

I attempted to experiment with React on StackBlitz, but I encountered a problem where I couldn't delete any lines of code. It seems that while I can add new lines of code, deleting them is not an option. Even when logging in with GitHub, the issue per ...

javascriptangularjsreactjstypescriptstackblitz

What is the best way to combine a JSON response object with the variable J inside a for loop?

Received a JSON response as follows: { "name" : "chanchal", "login3" : "1534165718", "login7" : "1534168971", "login6" : "1534168506", "login5" : "1534166215", "login9" : "1534170027", "login2" : "1534148039", "lastname" : "khandelwal", ...

javascriptajax

Exploring Time Scaling and Range Adjustment in D3 Barcharts

My dataset looks something like this: dateRange = [ { date: 2017-03-23, value: 10 }, { date: 2017-03-25, value: 15 }, { date: 2017-04-01, value: 13 }, { date: 2017-04-02, value: 19 } ]; The results can be viewed here: https://embed.plnkr.co/iOBAuCZmo ...

javascriptd3.jsbar-chart

Issue with parameter functionality not working as expected

This code snippet is not functioning as expected. I am trying to extract and print the values from the URL parameter file:///C:/Users/laddi/Desktop/new%201.html?t=vindu&b=thind function GetURLParameterValue(param) { var pageURL = window. ...

javascripthtmlparameters

Selecting the child checkbox within the parent div using ng-click

Is there a way to trigger the click event of a parent div on its child checkbox in AngularJS? The Checkbox will have the attribute hidden, necessitating the parent div to act as the clickable element. Sample HTML: <body ng-app="checkboxApp"> ...

javascriptangularjsangularjs-ng-clickangularjs-ng-change

Prevent the elongation of HTML select elements in Bootstrap

Struggling to set the size of an HTML "select" field in Bootstrap 3 (latest) to normal width instead of 100%? Looking for a cleaner solution than resorting to tables or adding fields within bootstrap columns that might cause indentation issues due to borde ...

htmlcsstwitter-bootstrap

Check the validity of the schema for an array in a

Hi everyone, I need some help with this JSON code I have. var menu = [{ "name": "Computers", "children": [{ "name": "Notebook", "children": [{ "name": "Apple" }, { "name": "Windows" }] }, { "name": "Tablets", "children": [{ "name": "Apple" }, { "name": ...

javascriptjqueryjson

Submitting a POST request using a Chrome Extension

I am in the process of developing a Chrome extension popup for logging into my server. The popup contains a simple form with fields for username, password, and a submit button. <form> <div class="form-group"> <label for="exampleInputE ...

javascriptajaxgoogle-chrome-extension

React State Update Triggered by Changing Hidden Input/Textarea Value - No User Input Required

To activate a function when the contents of a hidden input, textarea, or textfield change in React without requiring user input to trigger it, you will need to dynamically adjust the value of the hidden input and then have the function automatically exec ...

javascriptreactjsmaterial-uireact-lifecycle