Looking to devise a button in css and html that reveals another button below it by rotating on its lowermost axis when hovered over.
Progress has been made here: http://codepen.io/machinarius/pen/BdtCb
However, there seems to be an issue with the hover behavior as observed in my code. The animation resets whenever the cursor moves. Why is this happening? Shouldn't
-webkit-animation-fill-mode: both;Let's break down this query into two main components:
The issue, as highlighted by Palpatim, is that when the cursor hovers over the unfold-button, it tends to abruptly move away. To rectify this, we need a stationary element that captures the hover action without displacing itself. One solution involves introducing a new div like so:
<div class="container">
<div class="unfold-button orange">
Hello World
</div>
</div>
Correspondingly, let's make alterations to the CSS selector accordingly:
.container:hover .unfold-button {
By implementing this in your HTML code, you should notice a stable hovering experience devoid of flakiness. However, although the glitchy movement has been addressed, the animation still fails to revert to its original position. This leads us to our next question:
Essentially, the absence of animation-fill-mode does not imply automatic reversal once the animation ceases. It merely dictates how certain attributes are filled out pre and post-animation. Removing the line specifying animation-fill-mode reveals that the sole distinction lies in reverting back after completion.
Furthermore, elements do not retain memory of previous animation settings, resulting in an instantaneous shift to their latest designation once the attribute alters. Consequently, the abrupt transition from the hovered state back to the original configuration occurs due to the forgotten animation assignment.
To tackle this issue, especially with the simplistic nature of the unfold animation, it's advisable to portray it as a transition instead:
.unfold-button {
/* ... */
border-style: none;
box-sizing: border-box;
transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-webkit-transition: 0.5s;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
}
.container:hover .unfold-button {
-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
Note the continuous presence of the transition attribuomeanibutes during both the active and inactive states. Similar to animation, its portrayal that dictates any outcome hinges on its immediate inclusion.
If the presented HTML and CSS codes align with what is being referred to here, everything should function harmoniously.
For further insights on reversing CSS animations upon hover-out, refer to:
How can CSS Animation reverse upon hover-out?
The issue arises when your animation is set to trigger on the :hover pseudo-class. This causes the animation to reset once you stop hovering over the element. One way to resolve this is by wrapping a container class around the animated element and applying the animation trigger to the container's :hover state, similar to the example provided at https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode.
I'm currently experimenting with a small project where I have multiple div elements containing an image, h1 tag, and p tag all sharing the same class name. My goal is to add CSS effects that make the h1 tag and p tag slide into view and become visible ...
I am struggling to get the buttons on the card to align properly. I have set a minimum height to ensure they are consistent in size regardless of content, but the alignment of the buttons is off. Take a look at the photo attached for reference - I want the ...
Forgive me for the rookie question, I know what I want to achieve should be simple but I seem to be having trouble articulating it in my search for solutions. Essentially, I am trying to set a section in HTML to the height of the viewport minus the height ...
I'm having an issue with positioning the percentage 100% in the center of the element. I attempted adjusting the spacing in the JavaScript code, but so far it hasn't been successful. Here is the current output for the code: http://jsfiddle.net/G ...
Why is my <nav> not sticking to the top of the viewport when scrolling, even though it has the .sticky-top class? <!doctype html> <html lang="en"> <head> <meta charset="utf-8> <meta name="viewport" content="wi ...
What specific ID should I use to block my Bootstrap Modal with AdBlock Plus? I want AdBlock Plus to block it for users who have it installed and are using it. I don't want to be overly intrusive by trying to circumvent ABP. The only reason I am using ...
Here is a list of dummy components: const OwnerList = () => { return ( <Box sx={{ display: 'flex', }} className="owner-container" > <Avatar src='https://hips.hearstapps.com/hmg- ...
Looking to fill a rectangular area on my page with a square positioned in the center, regardless of whether the rectangle is horizontal or vertical. Many existing solutions focus solely on creating a square from the width of a containing box, which doesn&a ...
https://i.sstatic.net/PlCYU.png Is there a way to prevent the background image from overflowing and causing a horizontal scroll bar to appear? The layout of the page consists of two columns, with each column taking up 50% of the width. The left column con ...
I'm encountering an issue with achieving 100% height on a child container in Google Chrome, although it works perfectly fine on Firefox. Here is the URL: http://linco.com.py/beta/multiplaza/cartelera.php The styling for the main container is as fol ...
I'm having an issue with HTML anchor tags not working properly in Chrome and Safari. Instead of scrolling up, the page scrolls down when clicked. Here is the HTML code I'm using: <a id="to-top"></a> <a class="button toTop" href="# ...
In my form, each question is on a separate page (div), with the ability to show and hide pages. If a user receives a response from the API with a status of "accepted", they are redirected to a URL. I'm currently trying to display a div if their status ...
I've been struggling to include a custom font in my project, but it's not working as expected. Here's how I added it to the .css file: @font-face { font-family: 'Open Sans'; src: url('/open-sans.eot'); src: u ...
I am working on a single-page website that contains numerous containers. Each container's content is loaded dynamically via ajax, so they may not all be populated at the same time. These containers have variable heights set to auto. The website uti ...
I have two images, one rectangle and one circular. The rectangle image needs to be positioned 10em lower due to a banner image at the top. Half of the circle should overlap with the rectangle while the other half remains outside. The center of the circle m ...
As a newcomer to the world of web design, I recently embarked on a journey with Bootstrap and also started exploring the platform Codepen. However, after working on a project in Codepen and attempting to transfer my code to Sublime, some unexpected changes ...
I am looking to use Flexbox to separate my components on the screen in a way that positions them correctly. I have 3 rows with textfields that need specific ratios related to the full width: row 1 : 2, 1, 1 row 2 : 1, 1 row 3 : 1, 1, 2 I attempted to ach ...
I've been trying to incorporate my own icon for the material UI select component. I successfully replaced the default icon using the "IconComponent" attribute in MU select. However, I'm facing issues with the new icon not rotating when the menu ...
I'm encountering an issue with my button that adds a set of text fields every time I click on the Add More button. The problem is that when I add new text fields, they are appended above the Add More button. Then, pressing the button again adds more t ...
Within my text lies the following css snippet: .text-description-header { font-size: 250%; color: white; text-shadow: 0 1px 0 black; } Observe the dark shadow effect it possesses. Inquiry I am curious if there is a way to alter the shadow t ...