I'm encountering an issue with setting the transition CSS property for a hover effect, as it doesn't seem to be working correctly.
Here is the relevant HTML:
<div class = "menuItemBox" id = "Mughlai">
<p class = "menuItemHeading">Mughlai</p>
</div>
And here is the associated CSS code:
.menuItemBox {
border-style: solid;
border-width: 5px;
border-color: DC3D00;
margin: 10px;
width: 33%;
height: 180px;
background-size: cover;
}
#Mughlai {
background-image: none;
transition: 0.3s;
}
#Mughlai:hover {
background-image: url("./images/Mughlai.jpg");
}