Despite having a hover animation, the CSS animation remains stuck

I'm looking to create a hover animation where one picture disappears upon hovering and is replaced by another picture, but I'm having trouble getting the back picture to disappear

My attempt involved changing opacity from 1 to 0 with a transition time of 0.5 seconds, but the image remains stuck in its original position

.Menu .mnpic {
    transform: translateX(30%);
}

.mnovly {
    position: absolute;
    top: 0;
}

.mwhite{
    opacity: 1;
    transition: 0.5s;
}
.mwhite:hover {
    opacity: 0;
}
.mblack{
    opacity: 0;
    transition: 0.5s;
}
.mblack:hover{
    opacity: 1;
    height: 200px;
}
<div class="mnpic">
                <img calss="mwhite" src="menuwhite.png" alt="" height="150px">
                <div class="mnovly">
                    <img class="mblack" src="menublack.png" alt="" height="150px">
                </div>
            </div>

htmlcss

Answer №1

The reason for this issue is that the front picture always stays above the back picture, so the .mwhite:hover effect does not work. Additionally, there is a typo in your HTML code - it should be changed from calss="mwhite" to class="mwhite"

To resolve the problem, I made adjustments to your HTML and CSS styles. I ensured that the front picture always remains in front and used the following CSS selector to trigger the hover effect on the front picture: .mwhite:hover + .mblack

In the provided example, I added borders and slightly shifted the images to enhance the visual impact:

.Menu .mnpic {
    transform: translateX(30%);
}

.mwhite{
    opacity: 1;
    transition: 0.5s;
    border: 1px green solid;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.mwhite:hover {
    opacity: 0;
    border: 1px blue solid;
}
.mblack{
    border: 1px red solid;
    opacity: 0;
    transition: 0.5s;
}
.mwhite:hover + .mblack{
    opacity: 1;
    height: 200px;
}
<div class="mnpic">
    <img class="mwhite" src='https://picsum.photos/200' alt="" height="150px">
    <img class="mblack" src='https://picsum.photos/300' alt="" height="150px">
</div>

Answer №2

.hover {
  width: 200px;
  height: 200px;
  background: url('https://picsum.photos/200') no-repeat center center;
  position: relative;
}

.hover:after{
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url('https://picsum.photos/300') no-repeat center center;
  opacity: 0;
  transition: opacity .3s;
}

.hover:hover:after {
  opacity: 1;
}
<div class="hover"></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

Switch the class on a specific div section

As you scroll to the top, a class named "blue" is added to the element with the ID of "div". However, when the scroll returns to the bottom, the "blue" class remains without being removed. Fiddle Link: http://jsfiddle.net/5d922roc $(window).scroll(fu ...

jquerycss

Concealed Sub Menus Within a Vertical Navigation Bar

I've successfully created a Vertical Menu with hidden submenus, but I'm struggling to make the submenu appear on hover. Any suggestions on how to achieve this? Also, I'd like to align the text all the way to the left and remove the bullets f ...

htmlcsswordpressmenunavigation

I'm encountering an issue where it appears that my ajax method may not be effectively communicating with my webservice

I am currently working on calling a webservice using an ajax request with the intention of retrieving clinical cases within a specific date range (for example, between 2015-01-01 and 2016-06-08). The webservice functions perfectly when tested individually. ...

jqueryhtmlsqljsonajax

Converting a webpage into UTF-8 format

Can you explain the concept of encoding a webpage to me? When someone mentions that a page is encoded in UTF-8 or another format like EUC-KR, what does that signify? Does it pertain to encoding done on the server-side or client-side? Is it related to th ...

javahtmlencodingutf-8character-encoding

Creating a pop-up effect for a div in the center of a table cell using HTML and CSS

I am currently working with Angular and facing a challenge where I need to display a div like a popup in a table cell when clicked. Despite having the click event logic in place, I am unsure of how to achieve this without using external libraries such as B ...

javascripthtmlcssangularhtml-table

Is it possible to activate the nearby dropdown based on the user's selection?

On my html webpage, I have a form that consists of three dropdown menus each with different options: The first dropdown (A) includes choices from 1 to 6, as well as 'not set'. The second dropdown (B) allows selections from 1 to 7, and also has ...

javascriptjqueryhtmldrop-down-menu

What is the best way to use absolute positioning in React Native to align an element with its grandparent?

I am trying to position a Font Awesome icon in a React Native project using absolute positioning relative to the grandparent element, rather than its direct parent. After some research, I came across the following information on this page: https://reactna ...

cssreact-nativecss-positionabsolute

Using Bootstrap and CSS to style a div element and fill it

I'm struggling with a div that splits in two, where I've placed an image on the left side. However, the image doesn't seem to fill the entire space and there are empty spaces on the sides. I'm using bootstrap, but any CSS solution would ...

htmlcssbootstrap-4

Concealing the URL Once Links are Accessed

I have a Movie / TV Shows Streaming website and recently I've noticed visitors from other similar sites are coming to my site and copying my links. Is there a way to hide the links in the address bar to make it more difficult for them to access my con ...

phpjavascripthtml

"Ajax validation is causing the duplication of the HTML page content within an HTML

My PHP username validation with Ajax code seems to be duplicating my HTML page inside an HTML div element, which is used for displaying Ajax errors. Despite trying various solutions and searching on Google, I have not been able to find a resolution yet. Th ...

javascriptphphtmljqueryajax

What is the process for transmitting data in JSON format generated by Python to JavaScript?

Utilizing Python libraries cherrypy and Jinja, my web pages are being served by two Python files: Main.py (responsible for handling web pages) and search.py (containing server-side functions). I have implemented a dynamic dropdown list using JavaScript w ...

javascriptpythonhtmljsoncherrypy

ag-grid allows for selecting multiple rows without the need to press the Control Key

In order to select a maximum of two rows without pressing the Ctrl button, similar to single row selection behavior, we need to ensure that if the user selects more than two rows, the first selected row is automatically deselected and only the latest two ...

jqueryhtmlangularjsag-grid

Performing calculations on PHP and MySQL data within an HTML table, enabling precise percentage

Here's the code I'm currently working with: <td> <?php echo $row['feild1'] + $row['feild2'] + $row['feild3'] + $row['feild4'] + $row['feild5'] + $row['feild6'] + $row[' ...

phphtmlmysql

Tips on arranging check-boxes horizontally in this code repository

We are working with an autogen form in PHP, and the way the checkboxes are currently displayed is demonstrated in the following code: case FIELD_CHECK_BOX: $fieldHtml = printCheckbox($mode, $field->getId().'[]', $field->get ...

phphtml

Create an HTML button with dual functionality

I currently have a button in my HTML that triggers the opening of the sidebar on mobile devices. <a href="#header" class="button scrolly">Contact Me</a> There is also a label element that, when clicked, selects the name field in the contact f ...

htmlfunctionbuttonlabel

How can you implement a transform transition toggle when a user clicks on an element

Check out this CodePen example for a cool overlay animation: https://codepen.io/pen/MoWLrZ Experience the unique animation of two overlays as you click for the first time. However, on the second click, watch as both overlays seamlessly return to their ori ...

jqueryhtmlcssanimation

I am looking to save the session value into the search box of the appTables application by utilizing jQuery

Is there a way to save the session value in the search box of appTables by using jQuery? <?php $session = \Config\Services::session(); ?> <script type="text/javascript"> $(document).ready(function () { var searc ...

phphtmljquerycssajax

Is there a way to adjust the time font size according to the dimensions of the time picker?

HTML and CSS .pickthetime { height: calc(var(--vh, 1vh) * 3); width: calc(var(--vw, 1vw) * 25); align-content: center; // center looks better, also tried left to stop it from breaking a new line on Safari on iOS font-weight: 300; } <input cla ...

javascripthtmljquerycssresponsive-design

How come my HTML form keeps refreshing instead of displaying an alert after submission, even though I've included onsubmit="return false"? Additionally, it seems to be throwing an error

Why is this basic HTML and JavaScript code not functioning properly? Instead of alerting once the form is submitted, it refreshes the page and throws an error. It has also been reported to sometimes throw a CORS error when using 'module' as scri ...

javascripthtml

Eliminating blank spaces below or above images when displayed horizontally

Displayed below is the image depicting my problem: I have discovered a cumbersome method to eliminate this unwanted whitespace by treating it as four separate lists and utilizing a complex for-loop to add elements. However, this approach limits the number ...

htmlcssimagelistwhitespace