css position - CSS Transition Sends Div Below Content on :hover exit -

I have CSS infections when user exceeds items , but when mouse Div , the contents have been pushed down during the transition.

& lt; Div class = "item" & gt; & Lt; Div class = "img" & gt; & Lt; / Div & gt; & Lt; Div class = "heading" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;

CSS:

  # container {width: 100%; Height: 100%; } .item {width: 100%; Height: 400 pixels; Status: Relative; } .img {background: # 000; Width: 40%; Height: 400 pixels; Swim left; Transition: width 0.5s ease; }. Title {width: 60%; Height: 400 pixels; float right; Background: # 900; Transition: width 0.5s ease; } .item: hover .img {width: 100%; } .item: hover Title {width: 100%; Background: RGBA (255, 255, 255, 0.9); Status: Completed; Top: 0; Left: 0; }  

I'm sure this is a simple status problem

updated Status to << code> / P>

  Transform: Translator Y (-100%); To get rid of the non-transition property  

now : before and after div heading > Is pushed down to item . To update JSFiddle,

updated transit: all to transit: width both img < / Code> and title which is pushing title below img to : hover , still > The basic problem of is still an issue

I think I got the answer :

near the title status: absolute; By doing , I can force it to stay inside the item div , to keep it from running below. So my updated CSS (with the actual class name and output content) looks like this;

 . Light {height: 400px; Status: Relative; }. Flight-img {background: red; Background size: cover; Width: 40%; Height: 400 pixels; Swim left; Status: Relative; / * CSS animation effect * / transition: width 0.5 ease of use; } Flight-title {width: 60%; Swim left; Status: Completed; Top: 50%; Correct: 0; Conversions: Translator Y (-50%); Transition: width 0.5s ease; } / * Optional IMG float *** / * is probably an easy way but it is now * /. Works for Flights: nth-of-type (4n-1). Flight-img {float: right; }. Flight: NT-OF-Type (4N-3). Flight-img {float: left; }. Flight: NT-OF-Type (4N-1). Flight-Title [left: 0; }. Flight: NT-OF-Type (4N-3). Flight-heading {float: right; } / * Add hover effect to the desktop / Flight / Hover: Flight-IMG {width: 100%; }. Flight: Hover. Flight-title {width: 100%; Status: Completed; Top: 0; Left: 0; Conversions: Translator Y (50%); Background: RGBA (0,0,0,0.//.75); Color: #fff; H2 {color: #fff; }}  

While my HTML looks like this:

  & lt; Div id = "flights" & gt; & Lt; Div class = "flight" & gt; & Lt; Div class = "flight-img" & gt; & Lt; / Div & gt; & Lt; Div class = "flight-title" & gt; & Lt; H2 & gt; Shared flights & lt; / H2 & gt; & Lt; P & gt; Shared flight option is available for 1 to 5 people. It is our most costly flight, you will fly with other passengers booked on that day. & Lt; / P & gt; & Lt; Button & gt; Book now & lt; / Button & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "clear" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - End flight - & gt;  

with one to show. I know the animation needs to work, but I'm able to make it easy, now it will be easy to keep divs in one place.