CODEWITHSUNDEEP
htmlcsscss-transitionsflexbox
user5245819
user5245819

Reputation:

Fading dynamic content on hover

http://jsfiddle.net/meh/mL2qa7n3/1/

I have two flexible boxes which change their flex-grow attribute on hover. I have managed to create a .before and .after, one of which is visible when not hovering and the other visible when hovering.

As you can see in the fiddle, the content switches instantaneously without any sort of transition. This starkly contrasts the transition of the flex boxes, giving a bad UX.

I wish to have the content fade upon hover at approx 5s. 

<div id="firstContainer">
<div class="first" id="firstLeft">
    <p class="before">Before</p>
    <p class="after">After</p>
</div>
<div class="first" id="firstRight"></div>


    #firstContainer {
    display: flex;
    flex: 0 1 auto;
    flex-flow: no-wrap row; 
    height: 300px;
}
.first {
    border: medium black solid;
    margin-right: 16px; margin-left: 0;
    -webkit-transition-property: flex-grow; /* Safari */
    -webkit-transition-duration: 1.5s; /* Safari */
    transition-property: flex-grow;
    transition-duration: 1.5s;
    padding: 10px 20px;
}
.first:hover > .after {
    display: inline-block;
}
.first:hover > .before {
    display: none;  
}
.first:first-child {
    border-left: none;  
}
.first:last-child {
    margin-right: 0;
    border-right: none;
}
#firstLeft {
    flex-grow: 2;   
}
#firstRight {
    flex-grow: 2;
}
#firstRight:hover, #firstLeft:hover {
    flex-grow: 3;   
}
.after {
    display: none;    
}
.before {
    text-align: center;
    margin: auto;
    width: 40%; height: 100%;
    border-top: medium black solid;
    border-bottom: medium black solid;
    padding: 10px 20px;
    box-sizing: border-box;
}

Upvotes: 1

Views: 67

Answers (1)

Louis Serre
Louis Serre

Reputation: 148

You can play with opacity transition on .before and .after content. You need transition for hover on and hover off

.before {
    opacity: 1;
    transition: opacity 2.5s ease-in-out 2.5s;
}

.after {
    opacity: 0;
    transition: opacity 2.5s ease-in-out;
}

.first:hover > .before {
    opacity: 0; 
    transition: opacity 2.5s ease-in-out;
}

.first:hover > .after {
    opacity 1;
    transition: opacity 2.5s ease-in-out 2.5s;
}

I updated your jsfiddle http://jsfiddle.net/yk9ph11x/. Care about the content inside div, you probably should add visibility: hidden or play with z-index on the hidden content to avoid content selection of hidden content.

Upvotes: 1

Related Questions