What is the best way to conceal additional images and display the correct one?

Is it possible to create a hover effect where the first span shows image number 1, and when another span is hovered over, it hides the first image and displays a different one? Below is an example of what I have so far:

<div class="overlays">
    <a href="#" class="overlays-a clearfix">
        <img class="overlays-img" src="./pic/1.jpg">
        <img class="overlays-img hidden" src="./pic/2.jpg">
        <img class="overlays-img hidden" src="./pic/3.jpg">
        <img class="overlays-img hidden" src="./pic/4.jpg">
        <img class="overlays-img hidden" src="./pic/5.jpg">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span class="last-span">5</span>
    </a>
</div>

Click here to view how this setup looks in action.

htmlcss

Answer №1

If you want to hide the classes overlays-img1 and overlays-img2 in your CSS style, you can utilize jQuery's .hover() method with the following implementation:

<div class="overlays">
    <a href="#" class="overlays-a clearfix">
        <img class="overlays-img1" src="./pic/1.jpg">
        <img class="overlays-img2" src="./pic/2.jpg">
        <span class="span1">1</span>
        <span class="span2">2</span>
        <span class="last-span">3</span>
    </a>
  </div>

Here is an example of how you can implement the .hover() method:

jQuery(document).ready(function($){
       $(".span1").hover(function(){
       $(".overlays-img1").css("display", "block");
         });

       $(".span2").hover(function(){
       $(".overlays-img1").css("display", "none");
       $(".overlays-img2").css("display", "block");
        });
        });

You can also achieve this using fading effects:

jQuery(document).ready(function($){
 $(".span1").hover(function(){
$(".overlays-img1").fadeIn();
 });

 $(".span2").hover(function(){
  $(".overlays-img1").fadeOut();
  $(".overlays-img2").fadeIn();
  });
   });

Another option is to show or hide elements:

 jQuery(document).ready(function($){
 $(".span1").hover(function(){
$(".overlays-img1").show();
 });

 $(".span2").hover(function(){
$(".overlays-img1").hide();
$(".overlays-img2").show();
 });
 });

If you encounter any issues with the code, feel free to let me know as I am currently accessing this on mobile.

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

I'm having trouble obtaining accurate results for $....<...$ within the <li> tags using MathJax

I have gained extensive experience working with LaTeX formatting, but not every document follows the standard practice of having a space before and after the symbols < and >. When I attempt to use MathJax to display these documents, they fail to rend ...

htmlmathjax

Create a JavaScript function that generates and prints a JSON object based on user input values

I am seeking a solution that does not rely on jQuery, but rather pure JavaScript. Most of the examples I have come across involve the use of jQuery. Within my HTML file (index.html) I have the following structure: <form id="1"> <input type="tex ...

javascripthtmlarraysjsondynamic

Vertical text area expansion functioning in Chrome, but not in Firefox

Is there a way to create a textarea that dynamically expands to fill the available space within a div, while maintaining fixed height offsets from the top and bottom? The CSS code below achieves this effect in Chrome, but Firefox displays the textarea with ...

htmlcssfirefox

Reply to adjust in size

My website has a sticky footer that needs to adjust its position as the content grows. Currently, when my textarea expands to a certain size, it goes beyond the footer which remains unchanged in its position. What would be the most effective approach to h ...

javascripthtmlcssresponsive-design

What techniques can I use to merge alpha channels with compositing in images?

Utilizing an HTML5 Canvas along with the KineticJS(KonvaJS) canvas library, I have successfully incorporated an Image element. My current objective is to erase specific pixels while maintaining a certain level of transparency. The red dot erases pixels at ...

javascripthtmlcanvaskineticjskonvajs

Implementing a delay of X seconds after a click event in JQuery: A step-by-step guide

Is there a way to delay the triggering of a click event after one has been recently triggered? I am facing an issue on my website where users can click multiple times on the "dropdown icon" and cause it to toggle the slide effect multiple times. What I wan ...

javascriptjqueryhtml

Bootstrap left aligns money figures in financial statements

Struggling with aligning the numbers for money properly? Want them to appear relative to each other but aligned to the left side of the columns, similar to the example in the screenshot below: Current Alignment: https://i.sstatic.net/9EnoS.png Desired A ...

htmlcsstwitter-bootstrapbootstrap-4

The Bootstrap modal simply fades away without ever making an appearance

My bootstrap modal is not displaying on desktop, only showing a faded screen. It works fine on mobile and tablet devices. Any ideas why this might be happening? Here is the code: <button type="button" class="btn btn-primary" data-to ...

javascripthtmljquerycsstwitter-bootstrap

What steps should I take to troubleshoot and resolve a 500 internal server error in a Node.js/Express.js application?

Whenever I try to post data from an HTML form to my Express.js server, all I get is an Internal Server Error 500. It just displays POST /routeitisreaching 500 without any further explanation. I'm struggling to identify the root cause of this issue. E ...

javascripthtmlnode.jswindowshttp

Tips for setting up date ranges in Fullcalendar

Currently, I am in the process of developing a fire department shift calendar using fullcalendar. I am faced with the task of altering the CSS for specific dates at irregular intervals that do not correspond to typical days of the week. In this particular ...

cssfullcalendar

Instructions for developing an HTML element slider using mouse dragging

I've come across plenty of slider plugins that either only allow clicking to view the next image, or if they do support mouse drag or touch capabilities, they are limited to images. Does anyone know of a plugin or method to create a mouse drag slider ...

javascriptjqueryhtmlcssweb-applications

Issues with Boostrap grid system on smaller screens

I'm attempting to design a flexible web layout that displays differently on various device screens. Here's the breakdown: 2 rows 6 columns (large screens, iPad Pro, and other devices) 3 rows 4 columns (iPhone 6/7/8 plus) 4 rows 3 columns (iPhone ...

cssbootstrap-4

HTML content does not reflect changes made to CSS class

My eCommerce store is on WordPress and we recently switched from Opencart. We're facing some challenges related to product descriptions. Each product has its own unique CSS in the description, similar to how it was done in Opencart with CSS tags start ...

htmlcsswordpresswoocommerce

The position of the <input> element shifts once the user provides input

I'm currently developing a web-based self-quizzing application, but I've encountered an issue with my input form. Each input field is placed in its own cell within a table for organization purposes. To maintain an aesthetically pleasing structure ...

jqueryhtmlcsscss-positionuser-input

Using jQuery's toggleClass method to implement CSS transformations

I have a question about this situation Each time the button is clicked, jQuery toggles the class: .transition { background-color: #CBA; transform: translateX(100px) scale(0.5) rotate(180deg); } Within the <div class="container2"> And upon ...

jquerycsstoggleclass

How to retrieve nested menu items within the scope by utilizing JSON and AngularJS

I have recently started working with angular and am facing difficulty in accessing the submenu items within my angular application. While I can successfully access the top level menu items, I am struggling to retrieve the second level items. Here is a sni ...

javascripthtmlcssangularjsjson

Error occurs when using Vue 3 Transition component with a child <slot> tag

I have developed a unique component that enables me to incorporate a smooth fading transition without the need to repeatedly use the <transition> element: <transition mode="out-in" enter-active-class="transition- ...

javascripthtmlvue.jsvuejs3vue-slot

Angularjs directive retrieves infowindow DOM element from Google Maps

In order to apply some style fixes to the Infowindow, I am trying to select the element with the class 'gm-style-iw'. This selection process is taking place within an angularjs directive. <div ui-view="full-map" id="full-map" class="mainMap c ...

javascriptjqueryhtmlcssangularjs

Initiate a new line within a flex item

<Popper id={"simplePopper"} open={this.context.loading} style={{display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: 'red',opacity:'0.5',width:'100%',he ...

cssmaterial-ui

The code for the bouncing image isn't functioning properly outside of the JSFiddle environment

I'm having issues with this jQuery snippet in my web application. It works fine on jsfiddle, but not when I add it to my project. Here's the code: $('.myimage').mouseenter(function() { $(this).effect('bounce',500); }); Her ...

javascriptjqueryhtml