When hover is not activated, the transition for text overflow gradient does not appear seamless

My dropdown menu currently has gradient overflow text and a transition effect on the selection's wrapper. However, when hovered over, it looks a bit strange. How can I improve its appearance?

Here is the HTML snippet:

<div class="durationDropdown">
  <select role="listbox" class="durationSelect">
   <option value="0">Less than 1 month</option>
  </select>
</div>

CSS snippet:

.container {
  width: 150px;
}

.durationDropdown {
  padding: 0px;
  flex: 1;
  text-align: left;
  position: relative;
  cursor: pointer;
  height: 5.1875rem;
  transition: 250ms;
  border: 1px solid #eee;
}

.durationDropdown::after {
  content: "";
  display: block;
  width: 40px;
  top: 0%;
  right: 0;
  height: 100%;
  position: absolute;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 63%);
  pointer-events: none;
}

.durationDropdown:hover::after,
.durationDropdown:active::after {
  background: none;
}

.durationDropdown:hover {
  background: black;
}

To see how it currently looks and view additional CSS in my code, check out my fiddle. Any suggestions or assistance would be greatly appreciated!

csscss-transitions

Answer №1

Unfortunately, adding a transition to a gradient is not possible. You can find more information on this topic in this article Use CSS3 transitions with gradient backgrounds.

What you are actually witnessing is the smooth transition of the 'color' property and not the gradient itself. If you wish to create a gradient that smoothly transitions out to hide part of a sentence, you can achieve it by following these steps:

  • Include a transition for the 'durationDropdown::after' element and replace 'background: none;' with 'opacity: 0;' like this:
.durationDropdown::after {
  ...
  transition: 250ms opacity ease-in-out;
  ...
}

.durationDropdown:hover::after,
.durationDropdown:active::after {
  /* background: none; */
  opacity: 0;
}

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

Is there a way to modify the border shape of items in the navigation bar?

Is there a way to achieve this particular shape when the current page is being displayed? https://i.stack.imgur.com/HELTM.jpg This is how my current code looks: current { transform: skew(-20deg); border: 1px solid white; color: black; background ...

htmlcss

Improving efficiency of basic image carousel in Angular 8

In my Angular 8 app, I am developing a basic carousel without relying on external libraries like jQuery or NgB. Instead, I opted to use pure JS for the task. However, the code seems quite cumbersome and I believe there must be a more efficient way to achie ...

javascriptcssangular

Accessing a specific child div within a parent div using JavaScript and CSS

Struggling to target and modify the style of the child div within id="videoContainer" <div id="videoContainer"> <div style="width: 640px; height: 360px"> <------- this is the target <video src ...

javascripthtmlcssecmascript-6

Inconsistencies with Colorbox behavior in an external HTML document

Encountering a strange issue with colorbox while attempting to display a "div" element from another HTML file. The code functions perfectly, except for the final "div" in the external file. The structure of my external file is as follows; div1 img par ...

jquerycsscolorbox

The issue with Bootstrap Vue is that it fails to render the CSS properly when utilizing cards

Recently, I delved into the world of Bootstrap Vue and wrote the code snippet below: <template> <div> <div> <b-card-group> <b-card border-variant="dark" header="Dark" align="center"> &l ...

cssvue.jsvuejs2bootstrap-vue

Creating a table with both a fixed header and a fixed column using only CSS

I'm looking to create an HTML table with a fixed header and fixed first column, but I want to avoid using JavaScript or jQuery to set scrollTop/scrollLeft for smooth functionality on mobile browsers. I found a solution that fixes the first column he ...

htmlcsshtml-tablemarkupfixed-header-tables

What is the best way to align vertically a horizontal list that includes both headers and icon images?

My goal is to create a horizontal navigation bar that features menu options with headings and icons below them. Upon hovering over each option, the block's background color should change and slightly increase in size. I initially used percentages for ...

htmlcss

`CSS Content Placeholder Issue When Used Alongside JavaScript`

Let me explain a bit, I have a master page named UserProfile.master which has a content placeholder linked to UserProfileWall.aspx. Now, I am trying to incorporate some additional JavaScript and a second CSS file in the userprofilewall page. However, whene ...

javajavascriptjqueryasp.netcss

Tips for showcasing five inputs in a single row on a webpage using a customized width in Bootstrap

I am struggling to align 5 inputs in a single row on a page with custom widths. For example, I want the amount input to be smaller than the offer input. I attempted to use columns and apply different classes for size, but the submit button ended up not bei ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

I'm having trouble with aligning my input checkbox within the form

My form includes multiple checkboxes, but I am having trouble aligning them properly. <!-- Multiple Checkboxes (inline) --> <div class="form-row"> <label class="chkdonar" for="donarchkform-0">Yes, I want to donate to AMIAB</label> ...

css

Tips for adjusting the width of Material UI TextField within a Table

I am utilizing a Material UI Table. This is how I construct it: tableValues.map((curRow, row) => { tableRows.push( <TableRow key={this.state.key + "_row_" + row}> {curRow.map((cellContent, col) => { let adHocProps ...

cssreactjsmaterial-ui

Display an AJAX div when the image is hovered over and have it track the movement of

I am seeking assistance with my website project, which involves providing users with download links to movies. However, I am struggling to make the preview_block div(id) appear when the mouse hovers over the movie_block div(id). Additionally, I am having ...

javascriptjqueryhtmlcssajax

Other options to consider besides using flex wrapping

Is it possible to use other methods to wrap these image items with the display: flex; property besides using the flex-wrap property? Are there alternative approaches available? body { margin: 0px; } img {} h1 {} p {} a { background-color: #ddd; ...

htmltwitter-bootstrapcssflexbox

Displaying messages in an Angular 2 chatbox from the bottom to the top

As a newcomer to using typescript, I am currently working on an angular 2 project and facing some challenges with creating a chatbox. My goal is to have new messages displayed at the bottom while pushing the old ones up one line at a time, as shown in this ...

htmlcssnode.jsangulartypescript

SASS : Loop not producing the most efficient CSS output

Is there a way to optimize CSS generation using a @for loop in SASS? An example speaks louder than words: Here is my SASS code: @for $i from 1 through 2 { .table-lg-#{$i}, .table-md-#{$i}, .table-sm-#{$i}, .table-xs-#{$i} { background: red; ...

cssloopssass

What is the best way to create a responsive menu in code?

I am working on creating a responsive menu. Check out cuppcomputing For the desktop version, the whole panel will be displayed when it meets the max-width: 600px (tablet and mobile size). Initially, only the title is shown, and clicking on it will reveal ...

jqueryhtmlcss

New design for UI grid: eliminate sorting menu and right-align column headers

I came across a question similar to this one My goal is to eliminate the dropdown menu from the column headers and align the text of the headers to the right. .ui-grid-header-cell { text-align: right; } However, my current attempts result in the disap ...

htmlcssangularjsangular-ui-grid

Expanding the width of the containing div using CSS

I have a main container with multiple smaller divs inside it. None of these small divs have specified widths. I want the black div to expand and fill up the entire space, stretching all the way to the ABC div on the right. This only needs to work in Chr ...

csshtmlwidth

The behavior of CSS position: sticky varies depending on whether the user is scrolling up or scrolling down

I am experiencing an issue in my Vue CLI app where a component with the position: sticky CSS property is being partially hidden under the top of the browser when scrolling down, but works correctly when scrolling up. This behavior is also observed on my Ga ...

javascriptcssvue.jscss-positionvuex

Updating the global CSS styles that were inherited from the node_modules folder in a Next.js project

I've been attempting to customize the CSS style for a rc-pagination component that was included in a CSS file I already imported in the root component _App. However, despite my efforts to override the styles in the index.css file of this component, no ...

cssreactjsnext.jsnode-modulesstyling