Large Image and Title with Animated Menu on Hover

HTML
<figure class="snip1437"> <img src="https://images.unsplash.com/photo-1487214626629-b7eaa70441b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80" alt="sample69" /> <figcaption> <h3>The Mint Process</h3> <ul class="links"> <li> <a href="#">DESIGN</a></li> <li> <a href="#">DEVELOP</a></li> <li> <a href="#">MAINTAIN</a></li> <li> <a href="#">ENHANCE</a></li> </ul> </figcaption> </figure>
CSS
//Image and title with menu on hover// figure.snip1437 { font-family: 'Raleway', Arial, sans-serif; position: relative; float: left; overflow: hidden; margin: 0px 1%; min-width: 150px; max-width: 1500px; max-height: 1230px; width: 100%; color: #384a56; text-align: right; font-size: 22px; background-color: #000000; text-transform: uppercase; } figure.snip1437:after { position: absolute; top: 0; bottom: 0; left: -30%; right: 70%; content: ''; background-color: rgba(0, 0, 0, 0.7); -webkit-transform: skew(25deg) translateX(-75%); transform: skew(25deg) translateX(-75%); -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } figure.snip1437 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } figure.snip1437 img { max-width: 100%; } figure.snip1437 figcaption { position: absolute; top: 0; right: 0; z-index: 1; padding: 30px; } figure.snip1437 h3, figure.snip1437 .links { width: 100%; margin: 0; padding: 10px; } figure.snip1437 h3 { line-height: 1.3em; font-weight: 900; font-size: 1.3em; } figure.snip1437 .links { font-size: 0.8em; letter-spacing: 3px; font-weight: 300; margin: 0; padding: 10px; } figure.snip1437 .links li { -webkit-transform: translateX(40px); transform: translateX(40px); opacity: 0; list-style: none; } figure.snip1437 a { padding: 5px 0; display: block; color: #ffffff; text-decoration: none; } figure.snip1437 a:hover { color: #b27c58; } figure.snip1437:hover:after, figure.snip1437.hover:after { -webkit-transform: skew(20deg) translateX(0%); transform: skew(20deg) translateX(0%); } figure.snip1437:hover img, figure.snip1437.hover img { zoom: 1; filter: alpha(opacity=50); -webkit-opacity: 0.5; opacity: 0.5; } figure.snip1437:hover li, figure.snip1437.hover li { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); } figure.snip1437:hover li:first-child, figure.snip1437.hover li:first-child { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } figure.snip1437:hover li:nth-child(2), figure.snip1437.hover li:nth-child(2) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } figure.snip1437:hover li:nth-child(3), figure.snip1437.hover li:nth-child(3) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } figure.snip1437:hover li:nth-child(4), figure.snip1437.hover li:nth-child(4) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
JAVASCRIPT
Expand for more options Login