Hello! I can not understand how you can make a smooth effect of changing the position of the background

Example:

enter image description here

Can someone help with getting the desired effect?

  • Ie it is necessary that the background disappears even more smoothly? - Arsen

2 answers 2

Their background is made pseudo-class :after and with the help of CSS animation it smoothly goes beyond the element borders:

 .block { position: relative; width: 200px; height: 30px; text-align: center; line-height: 30px; overflow: hidden; } .block span { position: relative; color: white; transition: all 200ms linear; z-index: 2; } .block:hover span {color: #363636} .block:after { display: block; content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #363636; transition: all 200ms linear; z-index: 1; } .block:hover:after {top: 100%;} 
 <div class="block"><span>Портфолио</span></div>

But if you need to use a script, then like this:

 $(function() { $('.block').mouseover(function() { $(this).stop().animate({'background-position-y': '-100%'}, 200); }); $('.block').mouseout(function() { $(this).stop().animate({'background-position-y': '0%'}, 200); }); }); 
 .block { position: relative; width: 200px; height: 30px; text-align: center; background-image: url(https://srcc.oboi.ws/wallpapers/big_11420_oboi_seryj_fon.jpg); background-size: 100%; background-position: 0% 0%; background-repeat: no-repeat; line-height: 30px; overflow: hidden; } .block span { position: relative; color: white; transition: all 200ms linear; z-index: 2; } .block:hover span {color: #363636} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="block"><span>Портфолио</span></div>

  • Thank you very much! what you need!) - WhoIsDT

 nav li a { float: left; padding: 10px 22px; line-height: 1; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #666; top: 0; position: relative; -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -o-transition: all 100ms linear; -ms-transition: all 100ms linear; transition: all 100ms linear; } nav li a.act-link:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: #f5f5f5; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; z-index: -1; } nav li a.act-link:hover:before { height: 0; } 
 <nav><ul><li><a class="act-link">Portfolio</a></li></ul></nav>