What is the best way to change an image when hovering over it?

Despite my efforts, the image did not change to another one when hovering. Instead, the second image appeared alongside the first one. Here is the code I used, can you please point out what I might have done wrong?

.card {
  width: 130px;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 50px;
}

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: inline;
}

.card {
  width: 130px;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 50px;
}

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: inline;
}
<div class="card">
  <img src="redlo.jpg" width="100" height="100" alt="first">
  <img src="whitelo.jpg" class="img-top" width="100" height="100" alt="second">
</div>

htmlcssimagehover

Answer №1

It seems like there may be some confusion regarding your question. When the .card:hover is activated, the second image is displayed on top of the first image, causing the first image to be hidden.

Based on your current code, it is functioning properly and there is no need to make the first image disappear.

However, if you do wish to hide the first image, you can simply add the following to your CSS:

.card:hover img:first-child {
    display: none;
}

One thing to note: your CSS is duplicated. You only need to include the classes .card, .card .img-top, and .card:hover .img-top once.

UPDATE: CONFIRMED FUNCTIONALITY WITH IMAGES

Below, you can observe how your code is correctly functioning after removing the duplicated CSS.

.card {
  width: 130px;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 50px;
}

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: inline;
}
<div class="card">
  <img src="https://dummyimage.com/100x100/0000ff/ffffff&text=Image+one" width="100" height="100" alt="first">
  <img src="https://dummyimage.com/100x100/ff0000/ffffff&text=Image+two" class="img-top" width="100" height="100" alt="second">
</div>

Answer №2

It appears that the height of the image is not displaying properly

Here is a suggestion to fix it:

.card:hover .img-top {
  display: block;
}

If the above code doesn't work, try adding the following to the .img-top selector:

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

Answer №3

Here is a helpful solution

.container {
  width: 200px;
  height: 250px;
  position: relative;
  margin: 20px;
}

.image {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.container:hover .image {
  display: block;
}
.container:hover .image1 { display: none }
<div class="container">
  <img src="blueimg.jpg" width="120" class="image1" height="120" alt="first">
  <img src="greenimg.jpg" class="image" width="120" height="120" alt="second">
</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

Using AJAX to showcase information from a web API in organized table formats

Looking for guidance on integrating a web API from the URL "" using jQuery AJAX to populate a table. I've searched for tutorials without much success. ...

phpjqueryhtmlajaxcodeigniter

Creating a "return" button for an editing form in AngularJS Datatables with the help of a form directive

Using AngularJS Datatables, I implemented a grid with additional "edit" and "delete" buttons in the last column. How is the grid/table rendered? HTML <!-- Required CSS and JS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/li ...

javascripthtmlangularjsangularjs-directive

Stunning Bootstrap 4 landing page components stacking beautifully on one another

I'm relatively new to frontend development and I'm facing a challenge in organizing a layout using Bootstrap 4. My goal is to create a banner for the landing page. I have attached an example of how I want the layout to look, please take a look. B ...

htmlcssbootstrap-4

PHP code in Wordpress incorporating an Ajax request

Does anyone know how to fetch user data as a string using ajax in WordPress? I think I understand the basic concept PHP This code goes in my functions.php file add_action('template_redirect', 'edit_user_concept'); function edit ...

javascriptphpjqueryhtmlwordpress

What is the best approach to extracting tightly-coupled code and converting it into an external library?

I have a question regarding paradigms that I would like to address, and if this is not the appropriate platform, please guide me to the right place. Your recommendations are most welcome :) Currently, I am tasked with extracting a significant piece of fun ...

javascripthtmlparadigms

Struggling with getting the JavaScript, scss, and CSS television animation to turn on and off properly? Seeking assistance to troubleshoot this

After finding this javascript code on Codepen and seeing that it worked perfectly in the console there, I tried to run it on my computer with jQuery but it didn't work outside of Codepen. Even when attempting to use it on JSfiddle or compile the SCSS ...

javascripthtmljquerycssscss-mixins

Creating a dropdown button in HTML table cells with JavaScript: A comprehensive guide

I'm attempting to create a drop-down button for two specific columns in my HTML table, but all the rows are being converted into drop-down buttons. I only want the "categorycode" and "categoryname" columns to be drop-down. $(document).ready(functio ...

javascriptjqueryhtml

If there is data in MySQL, proceed to display the results on the page; if not, display a check

I am struggling to implement a small logic that I can't seem to figure out here. My goal is to retrieve MySQL data from the database and echo it on a .php file. Before doing so, I need to check if the data is available. If it is, then I want to proce ...

phphtmlmysqlif-statement

Troubleshooting a Hover Problem in Firefox

Chrome is rendering the following code perfectly fine, but Firefox seems to be having trouble applying the hover effect. HTML <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> ...

htmlcssgoogle-chromefirefox

troubles with downloading using the <a> tag

I attempted to create a personalized file name for user downloads, but I am having trouble using ${} in the process. My goal is: let foo = "name" let fileName = `${name}footer.html` <a download={filename} className="btn btn-info">Download</a> ...

htmlanchor

Using HTML to place an image tag close to an input element

I'm experiencing a strange issue where adding an img tag alongside an input and a span causes the input and span to shift downwards. <div> <span>Credit Points</span> <input type="text" name="credit_points" value="2.25"/> ...

htmlcss

What are the reasons behind the ineffectiveness of !important in CSS?

I am looking to increase the font-size of all text on my website to 200%, you can find some test code in this Fiddle link. If it is a PX issue, why does the code work when I add the style to "<h2>"? <div> <h2 class="test" style="font-size: ...

htmlcss

XPath allows for the selection of both links and anchors on a webpage

Currently, I am using Screaming Frog and seeking to utilize XPath for a specific task. My objective is to extract all links and anchors that contain a certain class within the main body content, excluding any links found within div.list. I have attempted ...

htmlxmlxpathweb-scraping

Design and execution of webpage structure

My website features a single-page layout with fixed navigation that allows users to easily navigate up and down the page using #. However, when the page loads I want it to display the second section of content instead of the top section. Is there a way to ...

jqueryhtmlanchor

How can I make a bootstrap container maximize the available viewport space?

I've come across several similar posts, but none seem to address my particular dilemma. My challenge lies in presenting a table at the end of a bootstrap grid: <div class="container-fluid"> <!-- Various rows with different size ...

htmlcssbootstrap-4blazor

Assigning arbitrary hidden form data from dropdown selection

Would like to assign Layers Value as one of the following: GFS Meteogram 3day std or WRF 20 Global Meteogram 3day Std depending on the option selected from the dropdown menu <div><select id="myselect" class="productViewerParameter" name=" ...

javascripthtml

all elements with equal height within a flexbox positioned at the bottom

Check out this HTML code snippet I have for constructing a grid using Bootstrap 4: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOh ...

twitter-bootstrapcssflexboxbootstrap-4

Activate video in Slick Slider with the click of a button

I am facing an issue with my slider setup, where each slide contains a video as the background along with play/pause buttons. When I try to play the video by clicking the corresponding button on a specific slide, I encounter this problem: if I click the pl ...

javascriptjqueryhtmlvideoslick.js

Tips for identifying repeating id numbers within a form?

I recently completed a form with approximately 800 fields, only to realize that I accidentally gave some of the fields the same ID. Can someone please advise me on how to track down these duplicate IDs? ...

htmlformsfield

Is it possible for CSS in React to cause the vanishing of all buttons

I'm encountering an issue where the CSS styling applied to every button in my NavBar is causing a specific button labeled 'Search' to disappear when it shouldn't. The problem stems from NavBar.css, which contains a media query that unin ...

htmlcssreactjs