How to transition to linear-gradient?

Question

How to transition to linear-gradient?

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

How can I make the transition work with the example 1 that has the color made with linear-gradient , like the example 2 that has a solid color? p>

If possible, only in CSS

.e1 {
  width: 70px;
  height: 70px;
  background: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #f00, #ff0);
  transition: background .5s ease-in-out;
}

.e1:hover {  
  background: linear-gradient(#2d0059, transparent), linear-gradient(200deg, #a739a8, #b00000, #b5b500);
}

.e2 {
  width: 70px;
  height: 70px;
  background: red;
  transition: background .5s ease-in-out;
}

.e2:hover {  
  background: yellow;
}

Ejemplo 1
<div class="e1"></div>
<br>
Ejemplo 2
<div class="e2"></div>

css3 css

asked by aldanux 06.09.2017 в 15:36

source

2 answers

2

As I read here , it's not supported by CSS, but it's you can simulate using the opacity property.

.e3 {
    position: relative;
    width: 70px;
    height: 70px;
    background-image: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #f00, #ff0);
}

.e3:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(#2d0059, transparent), linear-gradient(200deg, #a739a8, #b00000, #b5b500);
    opacity: 0;
    transition: all .5s ease-in-out;
}

.e3:hover:after {
    opacity: 1;
}

<div class="e3"></div>
<br>

answered by 06.09.2017 в 16:02

Make Insert in a database with php Problem with the indexer being read-only C #

score 3 · Accepted Answer

At the moment linear-gradient does not support transitions, but you can simulate something similar by moving the background. What you have here is both gradient joined (line-gradient accepts all the parameters you want) and what you do is show the first half or the second, by transposing the position of the background (background)

div#example1 {
    background-image: linear-gradient(200deg, #d047d1, #f00, #ff0, #a739a8, #b00000, #b5b500);
    background-size: auto 210%;
    background-position: 0 100%;
    transition: background-position 0.5s;
    width: 200px;
    height: 100px;
  
    /* ...and various other button styles */
}

div#example1:hover {
    background-position: 0 0;
}

<div id="example1"></div>

The other solution is to have two div, one above (or inside) another, and change the transparency of the one above (or inside) to transition between totally transparent and totally opaque, each div having a different linear gradient, but It makes it more complicated to add text or other elements.