075 | Say no to this

<div id="warm"><div id="wr-ou">
<div id="wr-bd" style="background: url(https://via.placeholder.com/500x300);"></div>
</div>
<div id="wr-ti">
<div class="title"><strong>Say no to this</strong>
<span>played by: Tyler Hoechlin</span>
</div></div>
<div id="wr-minmin" style="background: url(https://via.placeholder.com/150x250)"></div>
<div id="wr-txt">
<h1> Nobody needs to know
<strong>Say no to this I don't say no to this</strong> </h1>
<txt> ¡Hola! Soy tu espacio para texto favorito, ¡escribe acá! </txt>
</div></div><div class="crdts"><a href="https://gitanodoescodes.tumblr.com/">— gitano;</a></div>

<style>#warm {width: 500px; height: 300px; position: relative; margin: 0 auto; border: 10px solid #fafafa; outline: 1px solid #eaeaea; background: #fafafa; overflow: hidden;}#warm br {display: none;}#warm #wr-bd {position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;-webkit-transition: all 1s ease; -moz-transition: all 1s ease; filter: blur(0px); -webkit-filter: blur(0px); -moz-filter: blur(0px)}#warm:hover #wr-bd {filter: blur(6px); -webkit-filter: blur(6px); -moz-filter: blur(6px)}#warm #wr-ou {width: 500px; height: 300px; position: relative; overflow: hidden; background: #a7323f; outline: 1px solid #eaeaea;}#wr-ti {position: absolute; bottom: 0px; left: 0px; right: 0px; top: 0px; display: flex; align-items: center; justify-content: center;}#wr-ti .title { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center;}#wr-ti strong {background: #fafafa; border: 1px solid #eaeaea; padding: 7px; padding-bottom: 0px; font: 23px 'Raleway', sans-serif; font-weight: 900; color: #a7323f; font-style: italic; border-bottom: none; text-transform: uppercase; width: 100%; text-align: center; position: relative; left: 0px; -webkit-transition: 1s; -moz-transition: 1s;}#wr-ti span {background: #a7323f; border: 1px solid #841a26; border-top: none; padding: 6px 7px; font: 7px 'Lato', sans-serif; font-weight: 600; text-transform: uppercase; color: #fff; margin-right: 0px; text-align: center; width: 100%; letter-spacing: 1px; position: relative; right: 0px; -webkit-transition: 1s; -moz-transition: 1s; text-shadow: 1px 1px 0 #841a26, -1px 1px 0 #841a26, 1px -1px 0 #841a26, -1px -1px 0 #841a26;}#warm #wr-minmin {position: absolute; width: 150px; height: 250px; top: 520px; left: 20px; border: 6px solid #fafafa; outline: 1px solid #eaeaea; -webkit-transition: 1s ; -moz-transition: 1s ;}#warm #wr-txt {position: absolute; width: 280px; height: 262px; top: -520px; right: 20px; background: #fafafa; -webkit-transition: 1s; -moz-transition: 1s; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;}#warm #wr-txt h1 {background: #a7323f; border: 1px solid #841a26; padding: 10px; padding-bottom: 8px; font: 18px 'Raleway', sans-serif; font-weight: 900; color: #fff; font-style: italic; border-bottom: none; text-transform: uppercase; text-align: center; margin: 0px; line-height: 100%; text-shadow: 1px 1px 0 #841a26, -1px 1px 0 #841a26, 1px -1px 0 #841a26, -1px -1px 0 #841a26;}#warm #wr-txt strong {border-top: none; padding: 3px; font: 7px 'Lato', sans-serif; font-weight: 600; text-transform: uppercase; text-align: center; letter-spacing: 1px; position: relative; display: block;}#warm #wr-txt txt {color: #222; display: block; font: 11px 'Lato', sans-serif; text-align: justify; padding: 15px; flex-grow: 1; overflow-y: auto; border: 1px solid #eaeaea; border-top: none; line-height: 120%}#warm #wr-txt txt br {display: block!important; margin: 5px;}#warm:hover #wr-ti strong {left: -500px;}#warm:hover #wr-ti span {right: -500px;}#warm:hover #wr-minmin {top: 20px;}#warm:hover #wr-txt {top: 19px;}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center;}</style><link href="https://fonts.googleapis.com/css?family=Lato:400,700|Raleway:400,700i,900i&display=swap" rel="stylesheet">