Is it possible to switch the background image when hovering?

Is the image proportion relevant to the issue at hand?

<style>
.img1:hover { background-image: url({%static 'images/img2.gif' %});
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
</style>

I'm trying to change img1 to a different picture (img2) when it is hovered over. I am using Django, but even after uploading the current image, the hover effect doesn't work! I'm new to CSS.

<body>
<div class="container-fluid2" style="padding-right:20%;padding-bottom:5%;" >
    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
            <div class="card h-60 w-80" data-aos="fade-up" data-aos-duration="3000">
                <a href="#"><img src="{%static 'images/img1.jpg' %}" class="img1 card-img-top" ></a>
                
            <div class="card-body">
                <div class="card-title"><h5><br>poketmon <br>poketmon </h5></div>
                <p class="card-text">category: RPG <br>simple:sample &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>poketmon : Nintendo Switch<br>all age</p>
            </div>
            <div id="btn_group">
                <button id="test_btn2">detail</button>
            </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-60 w-80" data-aos="fade-up" data-aos-duration="3000" >
                <a href="#"><img src="{%static 'images/pic2.jpg' %}" class="card-img-top" alt="..."></a>
            <div class="card-body">
                <div class="card-title"><h5><br>game2<br><br></h5></div>
                <p class="card-text">category: RPG <br>sample: sample &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>device: Nintendo Switch<br>all ages</p>
            </div>
            <div id="btn_group">
                <button id="test_btn2">detail</button>
            </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-60 w-80" data-aos="fade-up" data-aos-duration="3000">
                <a href="#"><img src="{%static 'images/pic3.jpg' %}" class="card-img-top" alt="..."></a>
            <div class="card-body">
                <div class="card-title"><h5><br>game3<br><br></h5></div>
                <p class="card-text"> category: RPG <br>sample &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>device: Nintendo Switch<br>all ages</p>
            </div>
            <div id="btn_group">
                <button id="test_btn2">detail</button>
            </div>
            </div>
        </div>
        
        </div>

   </div>
</body>

Answer №1

JavaScript is the solution here

document.getElementById("img1").addEventListener('mouseover', () => {
  document.getElementById("img1").src = "./img2.gif"
})

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

Navigating the world of gtag and google_tag_manager: untangling

Tracking custom events in my react application using Google Analytics has been successful. Initially, I followed a helpful document recommending the use of the gtag method over the ga method for logging calls. The implementation through Google Tag Manager ...

The onChange Event triggers only once in a checkbox input

I am implementing a checkbox component that emits an event to the parent component. However, in the parent component, I am facing an issue where I need to perform different actions based on whether the checkbox is checked or not, but it seems to only work ...

I'm looking for a creative JavaScript prototype example that can help illustrate the concept of prototypes. Can someone share an interesting sample with me

I've been trying to wrap my head around prototypes, but I just can't seem to grasp their purpose and function. Is there anyone who can provide a straightforward example (such as a collegeStudent object) that will clarify the fundamentals of proto ...

consistent height across the div when expanding

There is a recurring issue I encounter where it takes too long for me to solve the problem. My goal is to ensure that the bootstrap boxes at the bottom of the page have the same height. I attempted to set a fixed height in pixels using my CSS, but this cau ...

Adjusting the thickness of the CSS cursor line upon entering an input field

Having an image as the background for an input field has been causing issues for me. Although I can adjust the line-height and font-size easily, the cursor line appears outside of the background image when clicking inside the input field. Is there a speci ...

Expanding the Background Color when Hovered Over

Despite my extensive search on SO, none of the answers I found seem to address my specific situation. In a col-md-2 section where I have a navigation bar, I am trying to change the background color to extend up to the border when hovering. While I can cha ...

Dealing with unexpected modifications in a React class component

In short, I need to adjust the data in my class component before sending it to the server to match the API request format. To achieve this, I created a method called transformData within my class component which transforms the data extracted from the state ...

What is the speed difference between calling functions from require's cache in Node.js and functions in the global scope?

Let's imagine a scenario where we have two files: external.js and main.js. // external.js //create a print function that is accessible globally module.exports.print = function(text) { console.log(text) } Now let's take a look at main.js: ...

Utilizing the Django object array in AngularJS – a comprehensive guide

I have a Django variable structured like this: [<Topic object>, <Topic object>] When passing it to Angular using ng-init, I wrote the following: <div class="profile-navigation" ng-init="ProfileTopics={{ProfileTopics|safe}} "> However, ...

The beforeunload function in jQuery is not behaving as anticipated

My current goal is to show a pop-up with three choices whenever a user attempts to close the tab while on my website, and then store that choice somewhere. In my main.js file, which loads across all site pages, I have implemented the following code: $(do ...

Activate the date-picker view when the custom button is clicked

Utilizing this library for date-picker functionality has been quite beneficial. I am currently working on a feature that involves opening the date-picker upon clicking a custom button. The default input is functioning properly. <input name="pickerFromD ...

Utilize the 'document / redirect' API within an express controller function

Here is how I have an API call using document / redirect: https://i.sstatic.net/HIrbc.png This call is made within HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit ...

Troubleshooting: Issue with displaying PHP data on an AngularJS table using JSON through jQuery AJAX

I've been encountering an issue while trying to display data from a database on my HTML page using Angular and JSON. Despite the browser being able to read the database, it fails to show the data. Can anyone shed some light on why this might be happen ...

What is the method for utilizing script bundles in pure HTML (not cshtml)?

After reviewing the following two questions on Stack Overflow, I made sure not to ask a duplicate question: 1) @Render.Scripts in plain .html file - not in .cshtml 2) Rendering the script bundle in a plain HTML page I am curious about how to incorporate ...

What are the primary purposes of the site.webmanifest file?

As I navigate through an HTML Boilerplate, I come across a file named site.webmanifest. Despite my efforts to research its purpose online, I am still unclear about its significance. Could this file be essential for website development? What are the specif ...

I am having trouble displaying SASS styles in the browser after running webpack with node

In my current project for an online course, I am utilizing sass to style everything. The compilation process completes successfully without any errors, but unfortunately, the browser does not display any of the styles. The styles folder contains five file ...

Does modifying data from an AngularJS service update the original data within the service?

Accidentally, I managed to create something that works but feels like it shouldn't! Essentially, I have a JSON data with a list of items that can be selected by the user, modified, and then saved. Here is a simplified version of the code: app.service ...

Using AngularJS to create a select dropdown menu with nested objects as the options

Currently, I am working on developing an AngularJS application with a complex data structure. The data source consists of an array of individuals with their languages and skill levels. My goal is to be able to filter these individuals based on language sk ...

"Enhancing user experience with advanced checkbox filtering in Django using JavaScript

For filtering my results on an HTML page, I am attempting to use checkboxes. I pass my data in a list through a Django view, and then iterate through it using a loop like this: </div> {% for r in rows %} <div class="res_show"> ...

The child div can be scrolled horizontally, while the parent window remains fixed

I am facing a challenge with my HTML and CSS setup. I want to create a child div that scrolls horizontally, but I do not want the parent window to scroll along with it. Below is my current code: <div id="parent"> <div id="div1"> . ...