The -webkit-box-reflect effect vanishes during the transition

Question

The -webkit-box-reflect effect vanishes during the transition

I need help with this issue: The image loses its reflection during the transition until it returns at the end.

Any suggestions are appreciated! Thank you!

.specials-box {
    width: 330px;
    margin: 50px 0;
    height: 500px;
    position: relative;
    cursor: pointer;
}

.special-img {
  width: 80%;
    position: absolute;
    top: 20px;
    left: 10%;
  transition: all 0.3s ease-in-out;
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.3)));
  transition: all 0.3s ease-in-out;
  filter: grayscale(100%);
}

.specials-box:hover .special-img {
  filter: grayscale(0%);
  top:0;
  transition: all 0.3s ease-in-out;
  -webkit-box-reflect: below 25px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.3)));
}

<div class="specials-box">
  <img class="special-img" src="https://koktelbolt.shoprenter.hu/custom/koktelbolt/image/data/specials/4.png" />
</div>

html css reflection transition

Answer 1

Answer №1

Gradients currently do not have support for transitions, even though the specification suggests that they should eventually support transitioning between similar gradients through interpolation. I just shared an example to help with understanding.

.year {
        display: inline-block;
        padding: 10px 15px;
        cursor: pointer;
        text-align: center;
        color: #fff;
        font-size: 17px;
        border-radius: 20px;
         background: rgba(5,176,196,1);
        background: -webkit-linear-gradient(170deg, #05b0c4, #80ff8f); 
        background: -o-linear-gradient(170deg, 170deg, #05b0c4, #80ff8f);
        background: -moz-linear-gradient(170deg, 170deg, #05b0c4, #80ff8f);
        background: linear-gradient(170deg, #05b0c4, #80ff8f);
        transition:all 0.4s linear;
    }
    .year:hover {
        background: rgba(5,176,196,1);
        background: -webkit-linear-gradient(170deg, #80ff8f, #05b0c4); 
        background: -o-linear-gradient(170deg, #80ff8f, #05b0c4);
        background: -moz-linear-gradient(170deg, #80ff8f, #05b0c4);
        background: linear-gradient(170deg, #80ff8f, #05b0c4);
    }

<div class="year">2017</div>

You can utilize pseudo classes for this purpose.

.button {
  display: inline-block;
 // Rest of the CSS code
}

// HTML code for the button element

Answer 2

Gradients currently do not have support for transitions, even though the specification suggests that they should eventually support transitioning between similar gradients through interpolation. I just shared an example to help with understanding.

.year {
        display: inline-block;
        padding: 10px 15px;
        cursor: pointer;
        text-align: center;
        color: #fff;
        font-size: 17px;
        border-radius: 20px;
         background: rgba(5,176,196,1);
        background: -webkit-linear-gradient(170deg, #05b0c4, #80ff8f); 
        background: -o-linear-gradient(170deg, 170deg, #05b0c4, #80ff8f);
        background: -moz-linear-gradient(170deg, 170deg, #05b0c4, #80ff8f);
        background: linear-gradient(170deg, #05b0c4, #80ff8f);
        transition:all 0.4s linear;
    }
    .year:hover {
        background: rgba(5,176,196,1);
        background: -webkit-linear-gradient(170deg, #80ff8f, #05b0c4); 
        background: -o-linear-gradient(170deg, #80ff8f, #05b0c4);
        background: -moz-linear-gradient(170deg, #80ff8f, #05b0c4);
        background: linear-gradient(170deg, #80ff8f, #05b0c4);
    }

<div class="year">2017</div>

You can utilize pseudo classes for this purpose.

.button {
  display: inline-block;
 // Rest of the CSS code
}

// HTML code for the button element

The -webkit-box-reflect effect vanishes during the transition

Answer №1

Similar questions

What could be causing the extra room at the bottom of my webpage?

Bootstrap columns are still disrupted by large images even when they have reached their maximum width and height

What's the reason why Angular stops flickering with the use of "/" in href?

Managing images in JavaScript while conserving memory

Aligning the icon within the div and adding a gap between each div

I want to locate every child that appears after the <body> element, and extract the HTML of the element containing a specific class within it

Locating the xpath of an element directly beneath the opening <body> tag

list of key combinations in a ul element

Using Three.js to display a CSS3D-rendered DIV in full-screen mode

Utilize jQuery to choose a specific tab

Splitting the page into four sections with a unique H layout using CSS styling

Creating a layout of <video> components in vue.js, complete with the ability to rearrange and resize them through drag and drop functionality

Is it causing issues having the same version of jQuery included multiple times?

Utilizing Bootstrap and flexbox to create a card: repositioning the image to the left or right

Applying different styling to the same class within a different element using the + selector

What are the security risks of evaluating user-supplied strings in web browser storage?

The navigation bar is missing from the screen

Why should you use DIV comment tags in HTML code and how can you automate their implementation?

Utilize grids to ensure consistency in the width of every <li> element across the browser

Adjust transparency according to the information extracted from the AnalyserNode