Image and title with menu on hover

For example, Image and title with menu on hover...

Demo

HTML

<figure class="imgMenu"> 
        <img src="img/switching-img-4.jpg" alt="Image" />
        <figcaption>
                <h3>Html Lion</h3>
                <ul class="links">
                        <li> <a href="#">Javascript</a></li>
                        <li> <a href="#">Jquery</a></li>
                        <li> <a href="#">Html</a></li>
                        <li> <a href="#">Css</a></li>
                </ul>
        </figcaption>
</figure>
<figure class="imgMenu hover">
        <img src="img/switching-img-5.jpg" alt="Image" />
        <figcaption>
                <h3>Html Lion</h3>
                <ul class="links">
                        <li> <a href="#">Javascript</a></li>
                        <li> <a href="#">Jquery</a></li>
                        <li> <a href="#">Html</a></li>
                        <li> <a href="#">Css</a></li>
                </ul>
        </figcaption>
</figure>

CSS

<style>
        figure.imgMenu { 
                font-size: 16px; 
                color: #ffffff; 
                text-transform: uppercase; 
                background-color: #000000; 
                width: 48%;
                text-align: right; 
                max-height: 230px; 
                margin: 10px 1%; 
                position: relative; 
                float: left; 
                overflow: hidden; 
        }
        figure.imgMenu:after { 
                content: ''; 
                background-color: rgba(0, 0, 0, 0.7); 
                position: absolute; 
                top: 0; 
                bottom: 0; 
                left: -30%; 
                right: 70%; 
                -webkit-transform: skew(20deg) translateX(-75%);
                transform: skew(20deg) translateX(-75%);
                -webkit-transition: all 0.35s ease;
                transition: all 0.35s ease;
        }
        figure.imgMenu * {
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                -webkit-transition: all 0.35s ease;
                transition: all 0.35s ease;
        }
        figure.imgMenu img { 
                max-width: 100%;
                width: 100%;
        } 
        figure.imgMenu figcaption { 
                padding: 20px; 
                position: absolute; 
                top: 0; 
                right: 0; 
                z-index: 1; 
        }
        figure.imgMenu h3, 
        figure.imgMenu .links { 
                width: 100%; 
                margin: 0; 
                padding: 0; 
        }
        figure.imgMenu h3 { 
                font-size: 1.3em; 
                color:#FFFFFF; 
                line-height: 100%; 
                font-weight: bold; 
                margin-bottom: 5px; 
        }
        figure.imgMenu .links { 
                font-size: 0.8em; 
                font-weight: 300; 
                letter-spacing: 3px; 
                margin: 0; 
                padding: 0; 
        }
        figure.imgMenu .links li { 
                opacity: 0; 
                list-style: none;
                -webkit-transform: translateX(40px);
                transform: translateX(40px);
        }
        figure.imgMenu a { 
                color: #ffffff; 
                text-decoration: none; 
                display: block; 
        }
        figure.imgMenu a:hover { 
                color: #037cd5; 
        }
        figure.imgMenu:hover:after,
        figure.imgMenu.hover:after {
                -webkit-transform: skew(20deg) translateX(0%);
                transform: skew(20deg) translateX(0%);
        }
        figure.imgMenu:hover img,
        figure.imgMenu.hover img { 
                zoom: 1;
                filter: alpha(opacity=50);
                -webkit-opacity: 0.5;
                opacity: 0.5;
        }
        figure.imgMenu:hover li,
        figure.imgMenu.hover li { 
                opacity: 1;
                -webkit-transform: translateX(0px);
                transform: translateX(0px);
        }
        figure.imgMenu:hover li:first-child,
        figure.imgMenu.hover li:first-child {
                -webkit-transition-delay: 0.1s;
                transition-delay: 0.1s;
        }
        figure.imgMenu:hover li:nth-child(2),
        figure.imgMenu.hover li:nth-child(2) {
                -webkit-transition-delay: 0.2s;
                transition-delay: 0.2s;
        }
        figure.imgMenu:hover li:nth-child(3),
        figure.imgMenu.hover li:nth-child(3) {
                -webkit-transition-delay: 0.3s;
                transition-delay: 0.3s;
        }
        figure.imgMenu:hover li:nth-child(4),
        figure.imgMenu.hover li:nth-child(4) {
                -webkit-transition-delay: 0.4s;
                transition-delay: 0.4s;
        }
        /* Small Devices, Tablets */
        @media only screen and (max-width : 768px) {
                figure.imgMenu { 
                        width:100%; 
                        margin:0 0 15px; 
                }
        }
</style>

Javascript

/* Demo purposes only */
$(".hover").mouseleave(
        function () {
                $(this).removeClass("hover");
        }
);