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

Html Lion

Html Lion
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"); } );