Switching the background color in a diagonal transition when hovering from the bottom left to the top right

I found a helpful answer on this question regarding a certain technique. However, I am curious if it is feasible to implement a diagonal left-to-right background color transition - specifically from bottom-left to top-right?

Here is the CSS and HTML code for a menu:

.menu {
background: #1481C3;
color: white;
 border-right: 1px solid #666666; 
}

.menu ul.links {
list-style: none;
padding: 0;
}

.menu ul.links li {
border-bottom: 1px solid #0E99ED;
height: 64px;
line-height: 67px;
padding: 0 25px;
font-size: 15px;
background: linear-gradient(to right, #0E99ED 50%, #1481C3 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all 0.2s ease;
}

.menu ul.links li:hover {
background-position: left bottom;
cursor: pointer;
}
<div class="menu">
      <ul class="links">
        <li class="home">
          <div id="home" class="menu-icon-container">
            <img class="menu-icon" src="/images/home-icon.png" />
          </div>
          <span>Home</span>
        </li>
        <li class="assignments">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/assignments-icon.png" />
          </div>
          <span>Assignments</span>
        </li>
        <li class="proctoring">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/proctoring-icon.png" />
          </div>
          <span>Proctoring</span>
        </li>
        <li class="reports">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/reports-icon.png" />
          </div>
          <span>Reports</span>
        </li>
        <li class="administration">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/administration-icon.png" />
          </div>
          <span>Administration</span>
        </li>
      </ul>
</div>

In an attempt to make the transition horizontal, I adjusted the styles of the following class:

.menu ul.links li {
    background: linear-gradient(to top right, #0E99ED 50%, #1481C3 50%);
}

However, it did not produce the desired effect. Here is the link to the jsFiddle that showcases the issue.

I aim to have the initial state of li be entirely #0E99ED (light blue) and then shift to 100% #1481C3 (dark blue) upon hover. Currently, the transition displays about 25% in #0E99ED initially at the bottom left and only reaches approximately 75% on hover instead of the full transition. It needs to begin at 0% and reach 100% on hover.

Any advice on how to address this challenge?

htmlcssanimationtransitionlinear-gradients

Answer №1

If I understand correctly, all you need to do is increase the initial background-size so that the gradient isn't visible at first.

div {
  height: 100px;
  background-image: linear-gradient(45deg, blue 50%, lightblue 50%);
  background-size: 250% 100%;
  background-position: right bottom;
  transition: background-position .5s ease;
}

div:hover {
  background-position: left top;
}
<div></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

Display and conceal different sections using hyperlinks

Hey there, I'm back with another issue related to this code snippet on jsfiddle: https://jsfiddle.net/4qq6xnfr/9/. The problem I'm facing is that when I click on one of the 5 links in the first column, a second div appears with 3 links. Upon clic ...

javascriptjqueryhtmlcss

Retrieve the most recent information from the database based on a specific column

Is there a way to retrieve only the most recent row from each category in the database? Example Database: Table name: Colors id category timestamp 1 yellow 14/2/2014 2 blue 13/2/2014 3 red 14/2/2014 4 yellow 13/2/2014 5 blue 11/2/2014 ...

phphtmlsqlselecttimestamp

Does this extensive combination of pseudo classes hold true?

Here's the code snippet I am working with: .fontmenu .fontlist{ position: absolute; bottom:30px; display:none; } .fontbutton button:hover .fontmenu .fontlist{ display:block; } <div class="fontmenu"> ...

htmlcsscss-selectorshoverpseudo-class

What sets id and class apart from each other?

I understand that for id we need to use the '#' symbol and for class '.' symbol. However, I am unsure of the specific purposes of both class and id in styling CSS. Can someone provide clarification on when I should use id and when I sho ...

htmlcss

What is the best way to utilize Django forms with a <select> value that is frequently used?

I am currently developing an application that enables users to interact with a database of information, including searching and saving entries. Within the search feature of the application, there are multiple fields where users should specify comparison o ...

htmldjango

Template for PHP website including code

I am working on integrating this code into my index.php page in order to streamline the process of creating separate pages for my website using only simple HTML files. For instance: Instead of repeating the same template code on multiple pages like index, ...

phphtmlphp-include

What is the best way to split a semicircular border radius in two equal parts?

Is there a way to halve the yellow line or remove it from above the red box, while keeping it below? Can this be achieved using just HTML and CSS, or is JavaScript necessary? * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 1 ...

javascripthtmlcsscss-animations

Trying to configure and use two joysticks at the same time using touch events

I have been grappling with this problem for the past two days. My current project involves using an HTML5/JS game engine called ImpactJS, and I came across a helpful plugin designed to create joystick touch zones for mobile devices. The basic concept is th ...

javascripthtmlmulti-touchimpactjs

Having trouble getting the tailwindcss Google font link tag to apply properly

When I use the @import in the tailwind css file, it works fine. However, when I try to add the font using the <link> tag in _document.jsx, it fails to work properly. In Chrome dev tools, it shows that the classes are applied but the fallback font is ...

cssreactjsnext.jstailwind-cssgoogle-fonts

What factors contribute to the poorer performance of SVG rendering compared to PNG rendering?

I conducted a comparison of two images across various browsers. One image is an SVG while the other is a PNG format. Here are my findings: You can view the demo on JSFiddle here: http://jsfiddle.net/confile/2LL5M/ This is the code snippet I utilized: ...

javascripthtmlimagesvg

Discovering distinct colors for this loading dots script

Looking for assistance with a 10 loading dots animation script. I'm trying to customize the color of each dot individually, but when I create separate divs for each dot and control their colors in CSS, it causes issues with the animation. If anyone ...

javascripthtmlcss

AngularJS - Create Alert Pop-Up for Missing Input Fields

I've been struggling to set up my app so that it displays an alert when the user attempts to submit a form with an empty input box. Despite having a confirmation popup working in another part of the application, I can't seem to figure out why thi ...

javascripthtmlangularjs

Code written in Javascript runs before any CSS files are downloaded and processed

While researching async scripting in web applications, I stumbled upon an interesting article. Essentially, it suggests that JavaScript scripts are not executed until all stylesheet CSS files are downloaded and parsed. Intrigued by this concept, I decided ...

cssasynchronouspreloadlighthouse

Unable to import global CSS in React; however, local components are working fine

My React application is having trouble loading global CSS styles. While local components are able to access their own styled-components, the global CSS styles are not being applied across all components. I have tried various import paths and different file ...

cssreactjs

Adjust CSS to properly position links alongside details summary

Currently enhancing my Hugo site (repository link is here). I am aiming to integrate a details element alongside anchors, maintaining a consistent style. The desired layout is depicted in the initial screenshot where "abstract" serves as the details elemen ...

htmlcsshugo

Toggle nested menu within another submenu

Looking for help with toggling menu items? I currently have a menu setup with 3 icons where clicking on an icon opens the dropdown-mobile UL under it. The goal is to toggle different submenu items when 'Main menu item' or 'sub-menu item&apos ...

jqueryhtmlmenutoggleslidetoggle

Variations in CSS Stylesheets for Various Parts of the Body

Currently, I am in the process of creating a single page website. One issue that I have encountered is needing a Bootstrap "modal" class popup to appear when a button is clicked. However, the template I am utilizing was designed using Bootstrap Version 1, ...

csstwitter-bootstrapmodal-dialogtwitter-bootstrap-3stylesheet

Is there a way to position the button at the bottom right corner of my div box?

Having trouble positioning the button in the bottom-right corner of the parent div? I attempted using float: right;, but it ended up outside of the box. How can I keep the button within the box and align it to the bottom-right corner? If you have a solutio ...

htmlcss

The content of btn-id element in Angular is showing as undefined

I have a JavaScript file located at sample/scripts/sample.js and there are 8 HTML files in the directory sample/src/templates/. My goal is to select a button on one of the HTML files. When I tried using angular.elemnt(btn-id).html(), I received an 'un ...

javascriptcssangularjshtmlangularjs-directive

Issue with FusionCharts rendering correctly arises when the <base> tag is present in the HTML head section

Combining AngularJS and FusionCharts in my web application has led to a unique issue. The upcoming release of AngularJS v1.3.0 will require the presence of a <base> tag in the HTML head to resolve all relative links, regardless of the app's loca ...

javascripthtmlangularjsfusioncharts