Change from a gradient to a solid background when hovering over

I have applied a gradient as the background color for one element, but I also have a different background color for when the element is hovered over. Currently, when hovering over an element with the class .tinted, it flashes because it first shows no background and then applies the color rgba(0,0,0,0.65). Is there a way to make the transition go directly from the background: 

gradient(left, rgba(0,0,0,0.65), rgba(0,0,0,0.30))
to rgba(0,0,0,0.65) without the flash?

.tinted {
    transition: background-color 500ms linear;
    background: -webkit-linear-gradient(left, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background: -o-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background: -moz-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.30));
}

.tinted:hover {
    background: rgba(0, 0, 0, 0.65);
}
htmlcss

Answer №1

To create the desired effect, ensure to specify the gradients using background-image, and set the plain color with background-color:

.shaded {
    transition: background-color 500ms linear;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background-image: -o-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background-image: -moz-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background-image: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.30));
}

.shaded:hover {
    background-color: rgba(0, 0, 0, 0.65);
}

DEMO

Answer №2

Here's a Example of Implementation:

#container{
    width: 250px;
    height: 350px;
    background-color: yellow;
    background-image: -webkit-linear-gradient(left, aqua 0%, transparent 100%);
    transition: all 1s ease-in-out;
}

#container:hover{
    background-color: aqua;
}
<div id="container"></div>

Answer №3

An interesting approach is to create a gradient composed of two sections, one that transitions between colors and the other that remains constant.

You can then manipulate which part of the gradient is displayed using background-image.position property.

.example {
  width: 300px;
  height: 100px;
  background-image: linear-gradient(to right, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.3));
  background-size: 200% 100%;
  background-position: 100% 0%;
  transition: background-position 1s;
  margin: 10px;

}

.example:hover {
  background-position: 0% 0%;
}

#example2 {
  background-image: linear-gradient(to right, blue 50%, red 100%);
}
<div class="example"></div>
<div class="example" id="example2"></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

Align two grid columns in the centre of the footer

I have a question regarding the alignment of two grid columns in my footer. I am using Bootstrap 4 and would like to center them directly in the middle. Currently, both columns are centered individually but there is a large space between them. I have tried ...

htmlcsstwitter-bootstrapbootstrap-4

Incorporating a background image into a mat-dialog

After spending some time on the mat-dialog documentation, I discovered that I can add a background image to the mat-dialog using panelClass: 'my-class' to customize its appearance. This applies the class my-class to the div with the class cdk-ove ...

cssangularangular-materialangular-material-6

Ways to dynamically update CSS properties (such as changing the color scheme throughout the entire application)

I have a question... If you're interested in conditional styling, the best approach is to utilize either ng-class or ng-style. However... For instance, let's say I'm an admin and I would like to customize the color of my application using ...

javascripthtmlcssangularjs

Height Issue with Nested Columns in Bootstrap 5

My nested columns are giving me trouble with their height. I want them to have equal heights on both big and small screens. Currently, the sizes look perfect on the largest and smallest viewports, but not on medium-sized ones. Check out examples on codepen ...

htmlcssresponsive-designnestedbootstrap-5

Is there a method to navigate a specific number of directories relative to the current location?

Struggling to integrate Jekyll into my website, specifically when it comes to setting image paths. The issue lies in the fact that each post permalink is one folder deeper than the homepage, making it difficult to display images on both the homepage and ...

htmlcssjekyll

Animating the opacity of elements using jQuery and CSS

Trying to put together a fading slideshow with five slides that will loop back to the beginning. My code seems like it should do the trick, but there's something not quite right. <script type="text/javascript"> $(document).ready(function( ...

javascriptjquerycss

How can JavaScript be used to apply CSS formatting to text that appears as a new HTML element?

It's unclear if the question accurately reflects what I want to achieve. If I have a form that fades out and is then determined whether to display again through a cookie, can the confirmation message be styled using CSS? For example, I would like to ...

javascriptjqueryhtmlcss

Guide to assigning a value to a label in Razor's Html.DropDownList

I'm trying to assign a specific label value to the dropdownlist instead of the default value, but it seems like I might be making a mistake. @Html.DropDownList("cboCategoria", new SelectList(Model, "ID", "Nome"), new { @id = "cboCategoria", @label = ...

htmlrazor

How to add dimensions to a background image using CSS3

I would like the background image to have a size of 636px by 1140px instead of applying it to the div element directly. This is because I want to avoid scrollbars due to the height of the div. When I specify the width and height for the parent div, the ba ...

htmlcss

Comparing CSS properties: display:block; and display:table;

Are there distinctions between using display:block; versus display:table;? It seems that the display type of the DOM node containing table-row and table-cell nodes is inconsequential. According to MDN, applying display:table; makes it behave like a table, ...

htmlcsshtml-table

The webpage fails to automatically scroll to the bottom

I'm having an issue with a div element that I need to make scrollable. The menu is contained within this div (covering the full screen) you can see it here. When hovering over an element with children, the menu expands and extends beyond the screen. ...

htmlcsswordpress

Adjust text size within a div when hovering over it

I have a div with many elements inside. When the user hovers over the div, I want to increase the font size within that specific div. Here is the HTML code structure: <div class="col-sm-5 home-grid-2x"> <div class="home-grid-2 ...

htmlcss

Press on a circle to adjust its size to fit the section or division

Is it possible to make a circle expand and fill the section/div when clicked? I want the circle to fill the screen upon clicking, and then have some text appear in its place. Before posting this, I searched on the web and came across this jsfiddle link. ...

javascripthtmlcss

Issues with button padding in Firefox and Opera

Having an issue with the alignment of my buttons in HTML. In Opera, the button appears centered vertically, but in Firefox it seems like the text is slightly lower, messing up the design of my website. Below is the HTML code for the button: <input ty ...

htmlcss

Enhancing the appearance of the active menu item with HTML/CSS/JS/PHP

Here's the HTML code I have: <ul class="navigation"> <li><a href="index.php">Home</a></li> <li><a href="index.php?content=about">About us</a></li> </ul> As you can see, the content of the " ...

phphtmlcssmenunavbar

Attempting to execute JavaScript within HTML files that have been incorporated using Angular

My website has a menu designed in HTML, and instead of manually adding it to each page (which would make updating changes tedious), I am using Angular to include it dynamically (<div ng-include="menu.html"></div>). I've got some JavaScrip ...

javascripthtmlangularjs

Implementing a universal (click) attribute for Angular 2 in CSS

When using Angular 1, it was as easy as following this syntax: [ngClick], [data-ng-click], [x-ng-click] { cursor: pointer; } This snippet ensured that any tags with the ng-click attribute displayed a pointer cursor. How can we achieve the same effect ...

htmlcssangularjsangular

Need some assistance in finding a way to input multiple values from multiple buttons into a single input field in JavaScript

Hello, I am looking for a little help with reading multiple values using multiple buttons such as 1, 2, and 3, and displaying the output in the input like '123' instead of just one number at a time. Concatenate numbers with every click. <inpu ...

javascriptjqueryhtmlajax

items with sticky positioning on CSS grid

I've searched through various examples, but none seem to solve my issue. I am trying to make the sidebar (section) sticky as the page scrolls. The position:sticky property works when applied to the navigation bar, so it's definitely supported by ...

htmlcsscss-positioncss-grid

What could be the reason my CSS styles are not taking effect when trying to flip an image?

I am facing an issue with an app that has a two-sided HTML element. The goal is to flip the element when a user clicks a button. I have been experimenting with different approaches without success. Here is the code snippet I have been working on: HTML < ...

htmlcssvue.js