Код:
<!DOCTYPE text/html> <html> <head> <style>.fond{top:0;left:0; right:0;bottom:0; float: left;width: 30%;} .carreaux_presentation_light { display:table-cell; width:250px; height:250px; background-size:cover; overflow: hidden; position: relative; } .carreaux_presentation_light .shadow_swhow_mini { background-color:rgba(19,30,33,0.4); position: absolute; z-index: 1000; top:0;left:0;right:0;bottom:0; } .carreaux_presentation_light:hover .shadow_swhow_mini { background-color:rgba(16,23,41,0); } .carreaux_presentation_light .deroul_titre { position: absolute; text-transform: uppercase; font-family: 'Roboto'; padding: 7px; z-index: 1000; top:60%;left:-80%; color:#ffffff; font-weight: 300; font-size: 13px; width: 80%; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -ms-transition: all 0.7s; transition: all 0.7s; } .carreaux_presentation_light:hover .deroul_titre { background-color:#1e4944; left:0px; } .carreaux_presentation_light .deroul_soustitre { position: absolute; font-family: 'Roboto'; padding: 5px; z-index: 1000; top:60%;right:-85%; margin-top: 25px; color:#ffffff; font-weight: 300; font-size: 11px; width: 80%; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -ms-transition: all 0.7s; transition: all 0.7s; } .carreaux_presentation_light:hover .deroul_soustitre { background-color:#417c74;right:0px; }</style> <head> <body> <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'> <div align="center" class="fond"> <div class="carreaux_presentation_light" style="background-image:url(https://forumavatars.ru/img/avatars/0019/36/85/2-1565122308.png);"> <div class="shadow_swhow_mini"> <div class="deroul_titre">TIME LAPSE</div> <div class="deroul_soustitre">DD/MM/YYYY</div> </div> </div> <div style=" padding:5px; color:#1e4944; font-weight:300; font-size:30px; font-family:'open sans condensed';padding-top:20px;">CHAPTER <font style="font-weight:400;">#</font></div> <a href="EPISODE LINK" style="text-decoration:none;" target="parent"><div style=" color:#1e4944; font-weight:300; font-size:20px; font-family:'open sans condensed';"><p>Summary</p> <p><b>w/</b> PARTICIPANTS</p></div></a> </div> </body> </html>