Changing animation during mouse hover off

I've been experimenting with using 'translate3d' and 'transition' on hover to animate a div into view.

While the animation works smoothly when hovering over the element, I'm having trouble getting it to transition back out of view upon exit. Currently, it simply disappears without any transition effect.

Despite trying various approaches, I haven't been able to find a solution. If anyone could help point out what mistake I might be making, I'd greatly appreciate it!

Here's a link to my codepen for reference:

https://codepen.io/anon/pen/KeMxoB

Below is the CSS code snippet:

  a.box-item {
    position: relative;
    display: block;
    overflow: hidden;
}

a.box-item img {
    opacity: 1;
    transition: opacity 0.35s;  
}

a.box-item .text {
    display: flex;
    align-items: center;
    justify-content: center;        
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    margin: 0;

    opacity: 0;
    transition: transform 0.35s;
    transform: translate3d(0,100%,0);
}

a.box-item .text h2 {
    color: #FFF;
    font-weight: 100;
    opacity: 0;
    transition: opacity 0.35s;
    transition-delay: 0.05s;
}

a.box-item:hover {
    background: #000;
}

a.box-item:hover img {
    opacity: 0.8;
}

a.box-item:hover .text {
    opacity: 1;
    transform: translate3d(0,0,0);
}

a.box-item:hover .text h2 {
    opacity: 1;
}

Answer №1

Opt for "transition: all 0.35s;" over "transition: transform 0.35s;" in

a.box-item .text {
        display: flex;
        align-items: center;
        justify-content: center;        
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20px;
        margin: 0;
        opacity: 0;
        transition: all 0.35s;
        transform: translate3d(0,100%,0);
    }

this change will be beneficial.

Answer №2

To create a smooth transition effect, apply

transition: transform 2s, opacity 1s 1s;
to the .text element

transition: transform 2s, opacity 1s 1s;


a.box-item .text {
    display: flex;
    align-items: center;
    justify-content: center;        
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    margin: 0;

    opacity: 0;
    transition: transform 2s, opacity 1s 1s;
    transform: translate3d(0,100%,0);
}

Answer №3

Instead of using "transition: transform 0.35s;", try using "transition: all 0.35s;". This change should solve the issue.

a.box-item .text {
    display: flex;
    align-items: center;
    justify-content: center;        
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    margin: 0;
    opacity: 0;
    transition: all 0.35s;
    transform: translate3d(0,100%,0);
}

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

Difficulty with Jquery's random selection of grid divs

I am working on a grid layout consisting of 9 divs nested in columns of three. The objective is that when the main grid (with ID #left) is clicked, two divs from the middle row (row="1") should have the class .show randomly applied to them. In the column w ...

How can I create a parent div with cursor-pointer and apply inline styling to make all child elements

Is there a way to apply the cursor-pointer style to an entire div with inline CSS without it affecting just the white space around the child elements? I have tried using position and z-index without success. I am unable to use an external stylesheet for t ...

Utilizing the :after pseudo-element for placing text in a specific location

Here's the code I'm working with: div#myImg{ background: url('myimage.png') left top no-repeat; } div#myImg:after{ content: 'TEXT UNDER IMAGE'; margin:0 auto; vertical-align:text-b ...

What is the best way to create a website where images align perfectly with stacked cards?

Having trouble aligning the image on the right side of my website with two cards on the left side. Here is an example of what I'm aiming for: (https://i.sstatic.net/fBvTQ.jpg)](https://i.sstatic.net/fBvTQ.jpg) This is the current code: <!doctyp ...

The implementation of display flex is causing issues with the material-ui grid layout

Struggling to implement the grid system from material-ui due to an issue where grid items do not resize when resizing the browser window. The culprit seems to be a parent div with the style property "display": "flex". The dilemma arises from using a mater ...

How Can You Create a Sliding List Animation (Up/Down) Using Angular and Twitter-Bootstrap?

Hey, can you give me a hand with this? :) I'm attempting to create a sleek sliding up and down list in Angular, but I'm struggling to make it work. My CSS skills are not very advanced, so I'm still learning and gave it my best shot: http:// ...

Eliminating elements that adjust according to different screen sizes

Website: I am currently working on customizing a Tumblr theme I downloaded by removing some responsive elements. The rollover effects I created are being affected when the screen size goes below 1024px, and I am not happy with how it looks. Additionally, ...

The impact is felt across every button in CSS

Why is this happening? When I hover over a button, all buttons apply the effect, which should not be the case. I only want the effect to be applied to the button that I am hovering over. .buttons{ font-family: arial; text-decoration: none; padding ...

The table does not recognize any of the CSS classes when the TAG is inputted inside

I am currently working on a challenging form for players to save their personal character sheets in a database. To achieve this, I am incorporating numerous Input TAGs and utilizing tables for layout purposes, ensuring an organized and efficient design. E ...

What's the reason behind this file not opening?

When I try to insert this code into files index.html, style.css, and app.js, the page refuses to open. The browser constantly displays a message saying "The webpage was reloaded because a problem occurred." I am using a MacBook Air with macOS Big Sur and a ...

What is the best way to send props to a styled component without needing to convert them to transient props beforehand

Recently, I designed a custom Text component that accepts several props. These props are then forwarded to the styled component where specific styles are applied. However, I am facing an issue where I do not want these props to be passed down to the DOM, b ...

Utilize flexbox to make two elements on the same line

Is it feasible to have two elements on the same line when aligning a series of elements with flexbox? Consider this scenario: .outer { display: flex; flex-direction: column; margin-left: auto; margin-right: auto; width: 50px; } .outer .inner ...

Stop the context menu from popping up when the element is right-clicked

Is there a way to create a custom right-click interaction for an element on my website, <div class="myElement"></div>? I want to avoid the default context menu from popping up when the user right-clicks on this element in order to enhance the u ...

Properly spaced website images

I'm trying to display my images side by side with a slight margin in between them. However, when I apply a `margin-right: 10px;` to each div, the last image doesn't line up properly with my title bar. Is there a way to create spacing between the ...

Trouble with Chrome's CSS making table cell display as block

After searching, I stumbled upon this question that appeared to have the solution I needed. Surprisingly, even when using chrome 32.0.1700.102, the fiddle provided in the first answer worked perfectly for me. However, when I copied the HTML code into a ne ...

The concept of CSS "preload" animation

When working with CSS, I encountered an issue with lag while loading 24 different mask images for a transition effect. To address this, I tried using a div called "preload" to cache the images and prevent lag on playback: <div class='trans' s ...

Tips for keeping notification icons in the upper right corner of the box?

I am facing an issue with absolute positioning where the notification icons I've positioned to the top-right corner of a box are moving away when the screen size changes. Desired appearance of the image Actual appearance when screen size is adjusted ...

Tips for altering the icon fill color in toastr notifications

I have customized toastr success and error messages in my application by changing the background and font colors. Now, I want to update the colors of the icons displayed in these messages. Despite my thorough search, I have been unable to find a way to mod ...

Issue with React-Route not displaying components

Below is the code snippet from my app.js file: <Router> <Header title="My Todos List" /> <Routes> <Route path="/about" element={<About />} /> <Route path="/" ...

Unable to resize the div to fit the content

My container div is not adjusting its height based on the content inside. It expands according to the header and navigation divs, but not the sidebar which is nested inside another div. Here is the HTML structure: <div id="container"> <div ...