How can I center two images using a hover effect in WordPress?

When the mouse hovers over an image, it changes to another image. Everything works smoothly except for one issue - the image is not centered. Below is the code I am currently using:

HTML:

<figure>
    <a>
        <img class="hover" src="nachher.jpg" alt="" width="60%" />
        <img class="nohover" src="vorher.jpg" alt="" width="60%/" />
    </a>
    <figcaption>some text here</figcaption>
</figure

CSS:

img.nohover {border:0;} 
img.hover {border:0;display:none;} 
a:hover img.hover {display:inline;} 
a:hover img.nohover {display:none;}

The main question arises: How can I center the image(s) within the figure?

htmlcss

Answer №1

To achieve the desired effect, I suggest moving the width: 60% to the figure element and setting the images to width: 100%.

img.nohover {border:0;} 
img.hover {border:0;display:none;} 
a:hover img.hover {display:inline;} 
a:hover img.nohover {display:none;}
figure {
  width: 60%;
  margin: auto;
}
img {
  width: 100%;
}
<figure>
  <a><img class="hover" src="https://i.stack.imgur.com/2C22p.jpg" alt="" />
    <img class="nohover" src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" /></a>
  <figcaption>some text here</figcaption>
</figure>

To center the figure horizontally, apply margin: auto to it.

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

Adjust the navigation text and logo color as you scroll on the page

I am new to HTML and CSS and I am working on a website with PagePiling.js scrolling feature. I want to change the color of my logo image and navigation text dynamically as I scroll to the next section. Specifically, I only want the part of the logo and tex ...

javascriptjqueryhtmlcsspagepiling.js

Display the output of awk on a single line for specific columns

Here is a file called "test" that displays the following information: vserver share-name path acl TEST_SERVER TEST_SHARE_PATH /TEST/TESTSHAREPATH "test\testuser / Read","test\testuser1_R / Read","test\testuser2_RW / Change ...

htmlawk

Displaying an image on a jsp page

In my current JSP, within the HTML section, I have the following: <select> <%if(size == 1)%> <option>None selected</option> <%if(size > 1)%> <option>1</option> </select> Additionally, I have this ima ...

htmlcssjsp

The appearance of Bootstrap-Navbar is altered when viewed on a mobile device

After creating a website that was compatible with both web and mobile devices, I encountered an issue where the navbar would not collapse on my smartphone. However, when I resized the browser window to match the size of the smartphone screen, it worked per ...

javascriptjqueryhtmlcsstwitter-bootstrap

Halt the Changing of Button and Typography Styles with React Router and MUI

I am currently working on a component that I want to make clickable. However, when I wrap them in a <Link> element (from react-router-dom) or set component={Link} to="" on them, all the text inside them automatically becomes hyperlinks. For ...

cssreactjsmaterial-ui

Can the bottom border on an input textfield be removed specifically under the new character?

This is the new visual design I received: https://i.stack.imgur.com/kiQGe.png The label CLG is represented as a label, with the line being an input type=tel. Disregard the purple overlay... The designer has requested that I remove the border when a user ...

javascripthtmlcss

How to trigger a JavaScript function using a button click

I've been struggling to figure out why my JavaScript code isn't functioning properly within Ionic. Can anyone guide me on how to store a number in a variable, display that variable, and increment it when a button is clicked? I have successfully ...

javascripthtmlcss

Using jQuery to loop through divs, identify unique ones, and then add text from a specified value to a span element

I've been delving into the world of jQuery, asking numerous questions and providing some answers as a beginner myself. Currently, I have a good understanding of how to utilize jQuery for tasks such as adding CSS styles to a div and inserting text into ...

jqueryhtml

Implementing event handling with .On() in Jquery following .Off()

I need assistance with my responsive navigation bar. I am having trouble with the jQuery code to disable hover events if the width is less than or equal to 768px and enable it for desktop screens. $(window).on('load resize', function (e) { v ...

javascriptjquerycssunbind

What steps can be followed to incorporate a loading gif into this popup and subsequently eliminate it?

These simple inquiries are starting to get on my nerves. I can't keep waiting around for my website designer to resolve this issue. It shouldn't be that difficult... I managed to figure out most of it by researching similar questions, but I could ...

jquerycssloadinganimated-gif

leveraging the unique MySQL id displayed within the onclick/checkbox identifier

I am currently working on a website that displays database content and enables users to click on the content to view more information related to that specific id. I also want to include a checkbox next to each piece of content that will allow me to delete ...

phphtmlmysqlcheckboxonclick

In Visual Studio Code, beautification feature splits HTML attributes onto separate lines, improving readability and code organization. Unfortunately, the print width setting does not apply

I have done extensive research and tried numerous solutions, When using Angular and formatting HTML with Prettier, it appears quite messy as it wraps each attribute to a new line, for example: <button pButton class="btn" ...

javascripthtmlangularframeworksprettier

Invisible boundary line within the column

My task involves creating a table using div elements. The layout of the table includes two columns structured as follows: <div> <div class = "columnborder"><span>Some text for column 1</span></div> <div><span>Some ...

htmlcss

What's the best way to place my image inside a Bootstrap Accordion so that it is housed within the accordion-item?

I've been facing an issue with a Bootstrap Accordion. Everything works fine, except when I try to insert an image <img src="https://placehold.co/600x400" class="img-fluid" /> into an accordion-item <div class="accord ...

htmlcssbootstrap-5accordionbootstrap-accordion

`Can you teach me how to dynamically load HTML elements using input JSON data?`

What is the best way to iterate through an input array of objects? I currently have data for only 2 people included. However, there are more than 50 people's information in the input and I need to loop through all of them. Here is a sample code snip ...

javascriptjqueryhtmljsonecmascript-6

What is the best approach to transform an HTML textarea value into JSON format?

Client .. inserting some content into a form <textarea name="data"></textarea> After typing the following data into the textarea: {title: 'Hello one!', author: 'someone'} {title: 'Hello two!', author: 'mygf ...

javascripthtmljsonnode.js

Extract data using PHP regular expressions

I need to extract a specific portion of HTML data, removing everything above an H1 tag and below an H2 tag with the text 'What we offer'. This extracted data should be stored in a variable. <p>This part is unnecessary</p> <h1>T ...

phphtmlregex

Design a layout featuring an array of boxes in varied sizes

Is it possible to create a grid layout with 3 columns containing div boxes of varying heights, all populated with content extracted from a database? ...

htmlcss

The property 'scrollHeight' is undefined and cannot be read

I've created a messaging system using javascript and php, but I'm facing an issue. When new messages are received or the chat log grows longer, it creates a scrollbar. The problem is that when a new message arrives, the user has to manually scrol ...

javascriptphpjqueryhtmlcss

What steps should I take to make the code in jsfiddle functional on my Visual Studio Code platform?

const canvasEle = document.getElementById('drawing-container'); const canvasPad = document.getElementById('pad'); const toolbar = document.getElementById('toolbar'); const context = canvasEle.getContext('2d'); const ...

javascripthtmlcsscanvasjsfiddle