image with title on hover css
Sun Feb 13 2022 04:19:33 GMT+0000 (Coordinated Universal Time)
Saved by @developerchef #html #css #javascript
@import url(https://fonts.googleapis.com/css?family=Roboto:100,700;); .snip1585 { background-color: rgb(41, 46, 57); color: #fff; display: inline-block; font-family: 'Roboto', sans-serif; font-size: 24px; margin: 10px; max-width: 315px; min-width: 230px; overflow: hidden; position: relative; text-align: center; width: 100%; } .snip1585 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.45s ease; transition: all 0.45s ease; } .snip1585:before, .snip1585:after { background-color: rgba(46, 52, 64, 0.5); border-top: 50px solid rgba(46, 52, 64, 0.5); border-bottom: 50px solid rgba(46, 52, 64, 0.5); position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 1; opacity: 0; } .snip1585:before { -webkit-transform: scaleY(2); transform: scaleY(2); } .snip1585:after { -webkit-transform: scaleY(2); transform: scaleY(2); } .snip1585 img { vertical-align: top; max-width: 100%; backface-visibility: hidden; } .snip1585 figcaption { position: absolute; top: 0; bottom: 0; left: 0; right: 0; align-items: center; z-index: 1; display: flex; flex-direction: column; justify-content: center; line-height: 1.1em; opacity: 0; z-index: 2; -webkit-transition-delay: 0s; transition-delay: 0s; } .snip1585 h3 { font-size: 1em; font-weight: 400; letter-spacing: 1px; margin: 0; text-transform: uppercase; } .snip1585 h3 span { display: block; font-weight: 700; } .snip1585 a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 3; } .snip1585:hover > img, .snip1585.hover > img { opacity: 0.7; } .snip1585:hover:before, .snip1585.hover:before, .snip1585:hover:after, .snip1585.hover:after { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } .snip1585:hover figcaption, .snip1585.hover figcaption { opacity: 1; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } <figure class="snip1585"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" alt="sample70" /> <figcaption> <h3>Ingredia <span>Nutrisha</span></h3> </figcaption> <a href="#"></a> </figure> <figure class="snip1585 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample106.jpg" alt="sample106" /> <figcaption> <h3>Dianne <span>Ameter</span></h3> </figcaption> <a href="#"></a> </figure> <figure class="snip1585"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample109.jpg" alt="sample109" /> <figcaption> <h3>Samuel <span>Serif</span></h3> </figcaption> <a href="#"></a> </figure>
Comments