Image with button on hover

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600;); .snip1573 { background-color: #000; display: inline-block; font-family: 'Open Sans', sans-serif; font-size: 16px; margin: 10px; max-width: 315px; min-width: 230px; overflow: hidden; position: relative; text-align: center; width: 100%; } .snip1573 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .snip1573:before, .snip1573:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; background-color: #000000; border-left: 3px solid #fff; border-right: 3px solid #fff; content: ''; opacity: 0.9; z-index: 1; } .snip1573:before { -webkit-transform: skew(45deg) translateX(-155%); transform: skew(45deg) translateX(-155%); } .snip1573:after { -webkit-transform: skew(45deg) translateX(155%); transform: skew(45deg) translateX(155%); } .snip1573 img { backface-visibility: hidden; max-width: 100%; vertical-align: top; } .snip1573 figcaption { top: 50%; left: 50%; position: absolute; z-index: 2; -webkit-transform: translate(-50%, -50%) scale(0.5); transform: translate(-50%, -50%) scale(0.5); opacity: 0; -webkit-box-shadow: 0 0 10px #000000; box-shadow: 0 0 10px #000000; } .snip1573 h3 { background-color: #000000; border: 2px solid #fff; color: #fff; font-size: 1em; font-weight: 600; letter-spacing: 1px; margin: 0; padding: 5px 10px; text-transform: uppercase; } .snip1573 a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 3; } .snip1573:hover > img, .snip1573.hover > img { opacity: 0.5; } .snip1573:hover:before, .snip1573.hover:before { -webkit-transform: skew(45deg) translateX(-55%); transform: skew(45deg) translateX(-55%); } .snip1573:hover:after, .snip1573.hover:after { -webkit-transform: skew(45deg) translateX(55%); transform: skew(45deg) translateX(55%); } .snip1573:hover figcaption, .snip1573.hover figcaption { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); opacity: 1; }

$(".hover").mouseleave( function () { $(this).removeClass("hover"); } );

This is another example of a card layout with images that have buttons appearing on them as a hover effect, designed using CSS, HTML, and JavaScript. The fonts and images are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The image card is given the styles of background-color as #000, display as inline-block, font-family as 'Open Sans', sans-serif, font-size as 16px, margin as 10px, max-width as 315px, min-width as 230px, position as relative, text-align as center, and width as 100%. The image has the styles of vertical-align as top, max-width as 100%, and backface-visibility as hidden. The button inside is given the styles background-color as #000000, border as 2px solid #fff, color as #fff, font-size as 1em, font-weight as 600, letter-spacing as 1px, padding as 5px 10px, and text-transform as uppercase. In a hover event, the opacity of the image becomes 0.5 and takes a transform style of skew(45deg) translateX(55%).

Image with button on hover

Post Comment or Questions Cancel reply

Several Related Snippets