Search code examples
cssclasshovertransitiontarget

How to add hover transition while targeting class with ">"

I am trying to add transition, but can't make it work. My hover works slightly different, as it is targeting different class to change, it's: 

.news-thumbnail:hover > .news-description-container{
padding: 1.5rem 2rem;
height: 21rem;  
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;
}

Edit: adding original class    

.news-description-container{
position:absolute;
width: 100%;
bottom: 0;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
background-color: white;
padding:2.5rem 2rem;
text-align: left;
height: 15.5rem;
}

Which makes this: https://i.sstatic.net/DyeOS.png

Into this when you hover it(news-thumbnail), simply white area(news-description-container) slides up: https://i.sstatic.net/Q6mxf.png

How can I make the transition work for this one? I just want it to slide up and down, not appear/disappear without transition.

Maybe I did it wrong and shouldn't do it this way? Didn't found anything after googling, so it might be useful for others.

Thanks!

Solution

  • See Here... You can use same style hover transition.

    Just change few parameters and thats it...

    See code [Here]1