There is such a code

$('.news-block_main').hover( function() { $('.news-block-hover_main').animate({ height: "toggle" }, 200)('display', 'block'); }, function() { $('.news-block-hover_main').animate({ height: "toggle" }, 200)('display', 'none'); } ); 
 .anews { position: absolute; top: 0; left: 0; width: 33.33%; height: 33.33%; } .news-block { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } .news-block.news-block_main { width: 200%; height: 200%; border-top: 4px solid #0e0f16; top: 0; left: 0; } .news-block-info { position: absolute; top: 92%; left: 0; width: 100%; padding: 2px 21px 9px; color: #fff4e7; font-size: .95em; line-height: 1.2em; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="actuallynews" class="anews"> <div class="news-block news-block_main " style="background-image: url(http://i.imgur.com/h4i1dwG.jpg);"> <div class="news-block-hover_main" style="display:none;"> <img src="http://i.imgur.com/QlPUjPg.png"> </div> </div> </div>

https://jsfiddle.net/5zpj6oLf/2/

Right now, the animation goes from top to bottom, it is necessary to bottom-up. How to implement it?

  • it would be nice if you added html markup and styles to the question - Alexey Shimansky
  • jsfiddle.net/5zpj6oLf/2 Hold :) - stoner
  • All code related to the question should be in question, not on third-party resources. Next time please use the snippet directly ruSO. He allows to do it ;-) - Alexey Shimansky
  • But these blue splashes should still be at the bottom and just the frame goes up or just at the top? - Alexey Shimansky
  • Well, right now, the animation appears from top to bottom - that is, first a frame, and then splashes, and vice versa from the bottom up - first splashes, and then a frame. Just in the spray is the text. - stoner

1 answer 1

As I understand it, it is enough to stick the news-block-hover_main to the lower left part of the block and that's it.

 .news-block-hover_main { display: none; position: absolute; bottom: 0; left: 0; height : 100%; }

In this case, I used 0,0 , but judging by the css it will be a bit with other coordinates.

And with zeros, it looks like this. But the idea, I think, is clear. Make a point of support at the bottom left.

 $('.news-block_main').hover( function() { $('.news-block-hover_main').animate({ height: "toggle" }, 200)('display', 'block'); }, function() { $('.news-block-hover_main').animate({ height: "toggle" }, 200)('display', 'none'); } ); 
 .anews { position: absolute; top: 0; left: 0; width: 33.33%; height: 33.33%; } .news-block { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } .news-block.news-block_main { width: 200%; height: 200%; border-top: 4px solid #0e0f16; top: 0; left: 0; } .news-block-info { position: absolute; top: 92%; left: 0; width: 100%; padding: 2px 21px 9px; color: #fff4e7; font-size: .95em; line-height: 1.2em; } .news-block-hover_main { display: none; position: absolute; bottom: 0; left: 0; height : 100%; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="actuallynews" class="anews"> <div class="news-block news-block_main " style="background-image: url(http://i.imgur.com/h4i1dwG.jpg);"> <div class="news-block-hover_main"> <img src="http://i.imgur.com/QlPUjPg.png"> </div> </div> </div>

https://jsfiddle.net/j3ey11dw/