I am attempting to add a transition effect on hover to a div element.
Despite creating CSS code for the transition, it does not seem to be working properly in Chrome or Firefox.
#header {
border: 0.1px solid #666;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
height: 10vh;
padding: 0;
transition: background-image 1s ease-in-out; /* Transition not functioning */
-webkit-transition: background-image 1s ease-in-out; /* Transition not functioning */
}
#header:hover {
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.0));
}<html>
<body>
<div id="header"> this is my header</div>
</body>
</html>Could anyone identify what may be causing this issue?
Your assistance would be greatly appreciated!
Thank you in advance