I have looked through many other questions here, but I can't seem to find an answer to my issue. I have a div block with a :after CSS selector where I apply a gradient overlay on an image. When someone hovers over the div, I want a slightly different gradient overlay.
The hover effect is working and the gradient changes, but I am struggling to make the speed of this change smooth using the transition CSS property.
Below is my code snippet:
.fotka-box::after {
/* Gradient background properties */
-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 {
/* Adjusted gradient for hover effect */
}
Can anyone provide guidance on what I might be doing wrong in implementing the transition effect? Any suggestions would be greatly appreciated.
PS: I am aware that I could use opacity, but I prefer changing the gradient color and style rather than transitioning from 0 opacity to 1.