水平导航以增长效果滑出

Question

我想重现在airforce.com上看到的效果。 在英雄的正下方，我戳了一下，看不到他们在做什么。 看起来它是使用淘汰赛开发的，但我想使用jQuery和Css重新创建。

如果您知道调用的效果是什么，或者知道可以实现此目的的库，请告诉我谢谢！

https://www.airforce.com/

Answer 1

我仅使用css创建了一个简单的效果模型。 查看小提琴

https://jsfiddle.net/rob_primacy/p6ee9d71/2/

<div class="image-block">
   <div class="image"></div>
</div>

.image-block {
    position: relative;
    width: 300px;
    left: 200px;
}

.image { 
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    transition: all ease .3s;
    height: 600px;
    background: url("http://www.difrusciaphotography.com/wp-content/uploads  /2015/08/Place-to-unwind_Lake-Kananaskis-Alberta-Canada.jpg") #000 no-repeat center center;}

.image-block:hover .image {
     left: -40px;
     right: -40px;
     transition: all ease .3s;
 }