Changing the color of text causes a disruption in the CSS transition

I'm having trouble understanding why this issue is occurring. I have a link element that utilizes CSS transitions to create a fade effect into a gradient background on hover. Strangely, when I set the text color to white on hover, the transition stops working.

.social-item {
    margin-left: 0.25vw;
    padding: 0.1vw;
    transition: 0.2s;
    color: white;
}
.social-item:hover {
    background: linear-gradient(to left, #8E2DE2, #DC0486);
    color: white;
}
<a href="https://google.com" class="social-item"><i class="fab fa-keybase"></i> Keybase</a>

Furthermore, I am utilizing Bulma and Font Awesome in my project.

htmlcsscss-transitionsfont-awesomebulma

Answer №1

Creating transitions with background gradients is not a straightforward task. Check out the Animatable CSS Properties
One way to achieve this effect is by using pseudo-elements and applying an opacity transform.

.social-item {
  position: relative;
  color: white;
  z-index: 1;
}

.social-item::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to left, #8e2de2, #dc0486);
  z-index: -1;
  transition: opacity 0.5s linear;
  opacity: 0;
}

.social-item:hover::before {
  opacity: 1;
}
<a href="https://google.com" class="social-item"><i class="fab fa-keybase"></i> Keybase</a>

For more insights on this technique, read this interesting article.
Thank you!

Answer №2

It appears that the issue you're facing involves creating a gradient transition, which is not directly supported. However, you can achieve a similar effect by using the opacity property in CSS. By setting opacity: 0 for the main element (.social-item) and opacity: 1 for the hover state (.social-item:hover), you can apply a smooth transition of 0.2 seconds on the opacity, simulating the desired outcome.

.social-item {
    margin-left: 0.25vw;
    padding: 0.1vw;
    transition: 0.2s;
    color: white;
    opacity: 0;
}
.social-item:hover {
    background: linear-gradient(to left, #8E2DE2, #DC0486);
    color: white;
    opacity: 1;
}

If you need the element to display normally without requiring a hover action, using opacity: 0 will not suffice. In this case, you can utilize the pseudo-selector :after to add a dummy element to the main class and implement all transitions and background gradients on that. For a visual example, check out this codepen demonstration.

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

Dimming the background of my page as the Loader makes its grand entrance

Currently, I am in the process of developing a filtering system for my content. The setup involves displaying a loader in the center of the screen whenever a filter option is clicked, followed by sorting and displaying the results using JQuery. I have a v ...

javascriptjquerycssajaxhtml

"Create a web resume that is easy to print and

I'm currently working on implementing a print-friendly feature for a Bootstrap 4 template resume/CV. My goal is to minimize the spacing between sections when the document is printed, allowing users to easily convert it into a PDF or Word format. You ...

htmlcssprintingbootstrap-4

What is the best way to create a dot animation using CSS or JavaScript?

https://i.sstatic.net/60Hym.gif This particular GIF is sourced from Dribbble. I attempted to create a demo using pure CSS. Below are snippets of my code: @keyframes circles{ 0%{ transform: scale(0) rotate(150deg); } 100%{ transform: scale( ...

javascriptcss

When the border width is set to 1px in FireFox, the border size is calculated as 0.667

When using the FireFox browser alone, I noticed that the border size is displayed as 0.6667 when setting the border width to 1px on a div, input element, or any HTML element. The same issue occurs whether the border is applied using inline CSS or a separat ...

htmlcssfirefoxmozilla

Error: The checkbox property 'checked' is read-only and cannot be assigned to

After applying a filter to the following checkboxes, I noticed that once the filter is removed, the checkboxes disappear. The reason for this behavior is clear to me. However, the issue arises when attempting to assign the checked value to my ng-model in A ...

javascripthtmlangularjscheckbox

Manually controlling line breaks in HTML text

When collaborating with designers, they often have strong opinions about word wrapping in the final HTML page. If I am working on a fixed layout (non-responsive) and the designer is not satisfied with how the text wraps, there are several options available ...

javascripthtmlcssword-wrap

Can Phonegap be utilized to port a PlayN game to iOS?

PlayN seems like a fantastic tool for creating Html5 games. I'm curious to know if there are any plans to ensure that the html/javascript output is compatible with Phonegap, ultimately allowing for the creation of an iOS executable? ...

ioshtmlcordovaplayn

What is the best way to ensure Bootstrap columns adapt to different screen sizes on all devices?

Seeking assistance with creating a responsive Login/Register page layout. At present, the desktop version appears like this on 1920x180: http://prntscr.com/cl4ms8 Utilizing <div class="col-xs-6"> for both forms to ensure equal division on the page. ...

htmlcsstwitter-bootstrap

Exploring JQuery: Revealing or Concealing an Extra Step Depending on User Interaction

Currently, I am using jquery-steps to develop a dynamic two/three step form that allows for user interaction. My main goal is to implement a feature where an additional step appears after the second step based on the value of a checkbox. If the checkbox i ...

javascriptjqueryhtmljquery-steps

What is the best way to dynamically set the default value of a select option based on a

Based on the user's location, the post language is automatically set. I want to adjust the dropdown value to match the language of the post. Below is the code that I attempted to use, but it did not work as expected: <label for="lang">Languag ...

htmlselectswitch-statement

Getting rid of the excess white space below the footer caused by concealed elements

In my design, I have three columns. The rightmost column is filled with 'Divs' containing collapsed information that can be scrolled through using the mouse wheel. The overflow in the center is hidden. The width of all three columns is set to 760 ...

htmlcss

My website is experiencing issues with the inner border being transparent and not displaying correctly

I have encountered an issue where the inner border only appears transparent on a single page or JSFiddle, but for some reason it is not working on my website. Can anyone offer any assistance on what might be causing this problem? The border is displaying ...

javascripthtmlcss

What is the best way to position the logo in the center of the navigation bar, considering there are an unequal number of menu items on each side

As I work on coding a design I found for practice, I am facing the challenge of getting the logo to be centered in the navbar, similar to the layout in the Dribble link below. View Design on Dribble The navigation bar has 4 items aligned on the left and ...

htmlcssfrontend

Submitting forms using Jquery Mobile

Hi there! I need some assistance with a form that I have created for use with phonegap. I was initially using JavaScript to process it, but now I'm considering switching to jQuery for better functionality. My main goal is to display the "total" in a n ...

jqueryhtmlformscordova

Tips for automatically displaying the first option as selected in an HTML Select dropdown

I have an HTML select element where I want the option chosen by the user to not be displayed in the box. Instead, I would like the box to always show the first option, regardless of what the user selects from the dropdown menu. Below is my CSS code for sty ...

javascriptjqueryhtmlcss

What is the process for aligning Item1 to the left and Item2 & Item3 to the right using MUI React?

I'm working on a component that contains three different Typography components. I need to align "summary" to the left, while 'miles' and 'duration' should be aligned to the right. https://i.stack.imgur.com/7e9sY.png Here's t ...

javascriptcssreactjsmaterial-ui

What is causing this absolute list item to stray away from its parent container?

Why is the ul element taking up the full width of the wrapper element when the container div is its parent? How can this be adjusted? Here is the HTML structure: Wrapper | container | label | input | ul | botton Here is the ...

htmlcsspositiondisplay

choose a CSS class within a div element's class name

Hey there, I'm dealing with two HTML divs that both have the same price class of "uvp uvp-price". <div class="product-detail-price-container"> <meta itemprop="price" content="119.8"> ...

htmlcss

Tips for adjusting VBA script in Excel to work with an Access database table

I received this code from a skilled user who prefers to remain anonymous. The code is designed to search the HTML content for innerText of specific tags and transfer them to an Excel table, well organized under headers, structured as a pivot. Public Sub Ge ...

htmlsqlexcelvbams-access

Clean coding techniques for toggling the visibility of elements in AngularJS

Hey everyone, I'm struggling with a common issue in my Angular projects: app.controller('indexController', function ($scope) { scope.hideWinkelContainer = true; scope.hideWinkelPaneel = true; scope.headerCart = false; scope. ...

javascriptangularjshtml