code liyana

<link href="https://fonts.googleapis.com/css?family=Hind+Siliguri|Raleway:800" rel="stylesheet"><style> .wrap-inter { width: 450px; height: 450px; margin: auto; background-image: url(https://format-com-cld-res.cloudinary.com/image/private/s--LpWe-vmt--/c_limit,g_center,h_65535,w_700/a_auto,fl_keep_iptc.progressive,q_95/v1/0cc966d71c436e2be8ec2cf237ea9049/B315514-R10-03-4_JPG.jpg); background-size: 700px auto; position: relative; overflow: hidden; } .wrap-inter h2 { margin: 0; padding: 100px 20px 0; text-transform: uppercase; font: 40px 'Raleway', sans-serif; color: #fff; letter-spacing: 2px; position: relative; z-index: 2; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); transition: all 0.4s; } .wrap-inter:hover h2 { -webkit-transform: translate(-100%,0); -ms-transform: translate(-100%,0); transform: translate(-100%,0); } .wrap-inter h3 { margin:0 50px 0; background: #fff; max-width: 80%; padding: 2px 8px; position: relative; z-index: 2; font: normal 7px/100% 'Hind Siliguri', sans-serif; text-transform: uppercase; letter-spacing: 1px; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); transition: all 0.4s; } .wrap-inter:hover h3 { -webkit-transform: translate(120%,0); -ms-transform: translate(120%,0); transform: translate(120%,0); } .color { width: 100%; height: 180px; top: 125px; background-color: red; position: absolute; mix-blend-mode: multiply; } .inter-txt { width: 380px; height: 380px; background-color: #fff; position: absolute; top: 35px; left: 35px; overflow: auto; padding: 30px 40px; text-align: justify; font: 11px/1.7em 'Hind Siliguri', sans-serif;color: #2d2d2d; box-sizing: border-box; -webkit-transform: translate(0,110%); -ms-transform: translate(0,110%); transform: translate(0,110%); transition: all 0.4s; } .wrap-inter:hover .inter-txt { -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0); } .bot { top: 100%; height: 10px; width: 1px; } .inter-credit { position: absolute; bottom: 2px; left: 5px; } .inter-credit a { color: #ccc; font: 9px 'Hind Siliguri', sans-serif; text-decoration: none; text-transform: lowercase; letter-spacing: 1px; } </style>
<div class="wrap-inter"><!--
--><h2>Biddan</h2><!--
--><h3>Let us pray that things don't get any worse. </h3><!--
--><div class="color"></div><!--
--><div class="inter-txt">TEXTE<div class="bot"></div></div><div class="inter-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>