0

i checked a lot of other questions here, but can't find answer for my issue. i got a div block with :after css selector where i make a gradient overlay on image. than i have little different gradient overlay when someone goes :hover the div

it works and the gradient changes.. but i cant get work the speed of this change with transition css selector.

this is my code.. 

.fotka-box::after {
background: -moz-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.75))); /* safari4+,chrome */
background: -webkit-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* ie10+ */
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* ie6-9 */

-webkit-transition: all 1350ms ease-in-out;
-moz-transition: all 1350ms ease-in-out;
-o-transition: all 1350ms ease-in-out;
transition: all 1350ms ease-in-out;

display: block;
position: absolute;
top: 0;
right: 0;
height: 370px;
max-height: 100%;
left: 0;
pointer-events: none;
content: '';
}


.fotka-box:hover::after {
background: -moz-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(40%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.75))); /* safari4+,chrome */
background: -webkit-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* ie10+ */
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* w3c */
}

what i'm doing wrong here? thanks for any suggestions.

PS: i know i can use opacity but i want change the gradient color and style. not show from 0 opacity to 1.

Adamo
  • 121
  • 1
  • 6

1 Answers1

0

Take a look at this page for gradient transitions in CSS: https://stackoverflow.com/a/6542623/2872279

Basically, gradients don't really support transitions at the moment.

If you want a fade-in effect with a background gradient, you have to set an opacity on a container element and 'transition` the opacity.

Community
  • 1
  • 1
NBTX
  • 581
  • 1
  • 8
  • 24