Background image transition not working in CSS

Question

I have set the transition CSS property for a hover effect but for some reason it isn't working.

HTML-

<div class = "menuItemBox" id = "Mughlai">
    <p class = "menuItemHeading">Mughlai</p> 
</div>

CSS-

.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");
}

Oops, I forgot to paste a piece of my CSS. Let me edit my question. — Nandan Goyal, Nov 23 '20 at 10:10

score 0 · Answer 1 · answered Nov 23 '20 at 08:19

0

Add hover to #Mughlai.

.menuItemBox {
    border-style: solid;
    border-width: 5px;
    border-color: DC3D00;
    margin: 10px;
    width: 33%;
    height: 180px;
    background-size: cover;
   transition: 0.3s;
}

#Mughlai:hover {
    background-image: none;
    transition: 0.3s;
   border-color: #ccc;
}

<div class = "menuItemBox" id = "Mughlai">
    <p class = "menuItemHeading">Mughlai</p> 
</div>

answered Nov 23 '20 at 08:19

Vishal

235
1
15

Oops, I forgot to paste a piece of my CSS. Let me edit my question. – Nandan Goyal Nov 23 '20 at 10:10

Background image transition not working in CSS

1 Answers1