Move text to the left on hover image

Question

I have some text I want to move to the right when I'm hovering over an image :

 <div class="container-fluid"> <div class="info-over"> <div class="infoText"> Text that need to move to the right </div> <img src="http://lorempixel.com/300/200" alt="Avatar" class="image"> </div> </div> 

I want that the div infoText moves slowly to the right 50px when I'm hovering the image , and that when I stop hovering the image , it moves slowly backwards.

Tried with transitions , but it won't work for me, maybe you guys can help?

Answer 1

You can do it with Flexbox , positioning , order property , and the adjacent sibling combinator ( + ) to target the .infoText div :

 .info-over { display: inline-flex; /* takes only the content's width */ flex-direction: column; /* stacks flex-items (children) vertically */ } .infoText { order: -1; /* places the text above the img to achive the same display/layout as before */ position: relative; /* positioned relative to its normal position */ top: 0; /* default */ left: 0; /* default */ transition: left 1s linear; /* adjust */ } .image:hover + .infoText { left: 50px; transition: left 1s linear; /* adjust */ } 

 <div class="container-fluid"> <div class="info-over"> <img src="http://lorempixel.com/300/200" alt="Avatar" class="image"> <!-- moved it above the text so that you can use the + selector to target the element below --> <div class="infoText">Text that needs to move to the right</div> </div> </div> 

Another way with the transform: translateX() :

 .info-over { display: inline-flex; flex-direction: column; } .infoText { order: -1; transition: transform 1s linear; } .image:hover + .infoText { transform: translateX(50px); transition: transform 1s linear; } 

 <div class="container-fluid"> <div class="info-over"> <img src="http://lorempixel.com/300/200" alt="Avatar" class="image"> <!-- moved it above the text so that you can use the + selector to target the element below --> <div class="infoText">Text that needs to move to the right</div> </div> </div> 

But I recommend you to use the first solution.

Answer 2

Try

 $(".image").hover(function(){ $(this).closest('div').find('.infoText').animate({ 'marginLeft': '+=100px' }, 500); }, function(){ $(this).closest('div').find('.infoText').animate({ 'marginLeft': '-=100px' }, 500); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-fluid"> <div class="info-over"> <div class="infoText"> Text that need to move to the right </div> <img src="http://lorempixel.com/300/200" alt="Avatar" class="image"> </div> </div> 

Add the proper CSS too. The solution is a bit repetitive, but works!