horizontal navigation slide out with grow effect

Question

I want to recreate an effect I saw on airforce.com . It's right below the hero, I poked around a bit and can't seen to find out what they did. It looks like it was developed using knockout but I would like to recreate it using jQuery and Css.

If you know what the effect is called or know of a library that can achieve this, PLEASE let me know thanks!

https://www.airforce.com/

Answer 1

I created a simple mockup of the effect using css only. View fiddle

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;
 }