<div class="wrapper"> <div class="demo-content"> <figure class="img-box"> <img alt="sample54" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg"> <figcaption><h3>Сделано с любовью<span>@dobrovoi</span></h3></figcaption><a href="https://twitter.com/dobrovoi" target="_blank"></a> </figure> <figure class="img-box"> <img alt="sample73" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg"> <figcaption><h3>Заголовок<span>Подпись</span></h3></figcaption><a href="#" target="_blank"></a> </figure> <figure class="img-box"> <img alt="sample58" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg"> <figcaption><h3>Заголовок<span>Подпись</span></h3></figcaption><a href="#" target="_blank"></a> </figure> </div> </div>
body { margin: 0; } body { background: rgb(72, 75, 84); font-family: 'Roboto', sans-serif; color: #fff; } *, *:after, *:before { box-sizing: border-box; box-sizing: border-box; } @media (min-width: 1200px) { .wrapper { width: 1170px; } } @media (min-width: 992px) { .wrapper { width: 970px; } } @media (min-width: 768px) { .wrapper { width: 750px; } } .wrapper { margin: 2em auto; } .demo-content { text-align: center; } figure.img-box { text-align: center; position: relative; display: inline-block; overflow: hidden; margin: 10px 8px; min-width: 230px; max-width: 315px; width: 100%; background-color: #000000; -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19); box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19); } figure.img-box * { -webkit-box-sizing: padding-box; box-sizing: padding-box; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } figure.img-box img { max-width: 100%; vertical-align: top; } figure.img-box 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; } figure.img-box:after { border: 2px solid #ccc; position: absolute; content: ""; display: block; top: 50%; bottom: 50%; left: 0; right: 0; -webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; opacity: 0; } figure.img-box a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1; } figure.img-box:hover img { opacity: 0.2; } figure.img-box:hover:after { top: 0; bottom: 0; opacity: 0.9; } .img-box h3 { font-size: 1.2em; font-weight: 400; letter-spacing: 1px; margin: 0; text-transform: uppercase; transform: scale(0); -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; } .img-box h3 span { display: block; font-size: 0.7em; font-weight: 400; margin-top: 6px; } .img-box:hover figcaption, .img-box:hover h3 { transform: scale(1); opacity: 1; } @media only screen and (max-width:990px) { .img-box { margin-bottom: 20px; } }