Having trouble getting background image transitions to work properly in CSS?

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

Answer №1

Implement hover effect for #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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a dynamic HTML table as the page loads

Customize for vhinn This is the desired output: I am currently attempting to dynamically create an HTML table on pageload using variables retrieved from a database. Here is a simple example of HTML code: http://jsfiddle.net/jdv590/daCum/1/ Code snippet ...

asp.nethtmlloopsdynamic

Choosing the attribute value using jQuery/CSS

Looking for a way to retrieve attribute value using jQuery/CSS <dt onclick="GomageNavigation.navigationOpenFilter('price-left');"> I tried using $("dt[onclick='GomageNavigation.navigationOpenFilter('price-left')']") bu ...

javascriptjqueryhtmlcss

What is the best way to create a button that can cycle through various divs?

Suppose I want to create a scroll button that can navigate through multiple div elements. Here is an example code snippet: <div id="1"></div> <div id="2"></div> <div id="3"></div> <div id="4"></div> <div ...

javascriptjqueryhtmlcss

What is the best way to modify the size of a canvas element while maintaining effectiveness?

I've encountered an issue while using Canvas to create a pie chart with chart.js. Despite adjusting the dimensions of the canvas element, it continues to take up the entire page. <canvas id="myChart" height ="200" width="200"></can ...

javascripthtmlcanvaschart.jsdimensions

Frames of Animation

Seeking assistance in understanding how to create frame animation using JavaScript or CSS. Attempting to replicate the animation seen on this website. Intrigued by the road animation and unsure if it is achieved using a plugin or just JavaScript and CSS. ...

javascripthtmlcsssvgcss-animations

Exploring the Terrain: Troubleshooting Meteor CSS with Twitter Bootstrap

Recently, I have encountered an issue that perplexes me - I am unable to debug less code in my meteor app when the twbs:boostrap package is present. Interestingly, everything works fine when I remove it, but as soon as I add it back, the CSS seems to be co ...

csstwitter-bootstrapdebuggingmeteorless

Tips for updating the content of a div with the click of another div

Is there a way to dynamically change the content of a div upon clicking on a menu item? Here is the current layout for reference: https://i.stack.imgur.com/nOnlQ.png Below is the CSS and HTML code snippet: body { background-color: #555657; ...

javascripthtmlcss

What is the process for integrating a personalized font into the <head> section of the ConvertTo-HTML?

I created a script to generate an HTML file containing information about the services on a computer, along with some additional styling. $a = "<style>" $a = $a + "BODY{background-color:peachpuff;}" $a = $a + "TABLE{border-width: 1px;border-style: so ...

htmlcsspowershellfonts

Assistance with Php: Need help with remote addresses (I'm a complete beginner in php, apologies)

Hello, I have encountered an issue with some PHP code from OpenCart that is automatically inserting <br /> and commas "," into the addresses of all my customers in the order notification emails. This unintended addition is creating problems with the ...

phphtmlopencart

How can I troubleshoot an image not appearing in Bootstrap within a Laravel Blade file while using PHPStorm?

Forgive me if this sounds like a silly question: I attempted to use the following src attribute in an img tag to show an image on a website created with Bootstrap, while using phpstorm with a laravel blade file: src="C:\Users\MAHE\Pictures&b ...

htmlcsstwitter-bootstraplaravel-5laravel-blade

Tips for eliminating unnecessary white space using CSS

https://jsfiddle.net/38h8acaq/ Is there a way to eliminate the white space on the left of the first tab and between the tabs and the content? Despite adding several margin:0px; lines to the CSS, none seem to be effective in removing the unwanted whitespac ...

htmlcss

Extracting data from an HTML table on a website

I need assistance in generating a Python dictionary mapping color names to background colors from this color palette. What is the most effective method to extract the color name strings and corresponding background color hex values? The objective is to cr ...

pythonhtmlbeautifulsoup

How can I use Selenium in combination with Python to retrieve the visible text of a selected radio button or checkbox on a webpage?

I am currently working on processing a form where I need to extract the text values of all checked radio buttons. Each line item will have one radio button checked. Here is an example of the HTML structure for a checked radio button: <div style="white ...

pythonhtmlformsseleniumradio-button

Loading an animated SVG sprite file in real-time

Recently, I received an SVG sprite file from our designers to use in my app. The specified convention is to load the sprite at the top of the <body> element and then render icons using a specific code snippet: <svg class="u-icon-gear-dims"> ...

javascripthtmlcsssvg

Dynamic class name changes in Angular.js based on JSON object

I am trying to dynamically change the class of an <li> element based on the category value I am getting, but for some reason the class name won't update. Here is the code snippet: <div id="content"> <ul id="container" ng-controller ...

javascriptjqueryhtmlangularjsjson

What is the quickest way to redirect a URL in WordPress?

Is it possible to redirect a URL instantly in WordPress using this script code? JavaScript Code: jQuery(document).ready(function() { var x = window.location.href; if (x == 'http://example.com/') { window.location.hr ...

javascriptphphtmlwordpress

What is the best way to choose a specific section of a string using JQuery?

When utilizing the .html() function to retrieve html code, I encounter a need to extract a specific segment of the string. var newImgAdr = $(this).html(); The variable newImgAdr currently consists of: <img class="thumbnail-holder image-responsive cen ...

jqueryhtml

What is the best way to paste plain text into a Textarea without any formatting?

A challenge I am facing in my project is related to copying and pasting text into a Textarea. When a user copies text, the style of the text is also inserted along with it. However, when the user manually types the text, it gets inserted correctly without ...

htmlcssreactjs

What is the best method to incorporate a JavaScript object key's value into CSS styling?

I am currently working on a project in React where I'm iterating over an array of objects and displaying each object in its own card on the screen. Each object in the array has a unique hex color property, and my goal is to dynamically set the font co ...

javascriptcssreactjssassstyling

Rendering HTML5 and CSS3 on Internet Explorer 8

My coding knowledge is limited, but I am conducting research for our front-end developers. Our goal is to revamp our portal application using CSS 3 and HTML 5 in order to achieve an adaptive layout that can accommodate different browser widths. The curre ...

htmlcssbrowserinternet-explorer-8version