<style>

/* CONTAINER SETTINGS */

figure.blurfilter

{ margin: 0;

padding: 0;

display: inline-block;

position: relative;

overflow: hidden; / }

.figcaption img

{ width: 10px; }

figure.blurfilter img

{ display: block;

width: 250px;

height: auto;

transition: all 0.4s 0.4s; }

​

/* TEXT BOX */

figure.blurfilter figcaption

{ position: absolute;

display: block;

/* TEXT BOX COSMETICS */

text-align: left;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

text-align: center;

background: white;

padding: 10px;

z-index: 100;

width: 90%;

height: 90%;

overflow: auto;

top: 5%;

left: 5%;

font-family: Arial;

font-size: 16px;

opacity: 0;

/* TEXT BOX ANIMATION CODE */

-moz-transition: all 0.4s;

-webkit-transition: all 0.4s;

transition: all .4s; }

figure.blurfilter figcaption h3

{ border-bottom: 1px solid red;

text-align: left;

width: 90%;

margin: 0;

}

figure.blurfilter figcaption p

{ text-align: left;

margin-top: 10px;

line-height: 1.5;

}

figure.blurfilter figcaption a

{ text-decoration: none;

}

figure.blurfilter:hover img

{ -webkit-filter: blur(5px);

filter: blur(5px);

-webkit-transform: scale(1.3);

transform: scale(1.3);

-moz-transition: all 0.4s;

-webkit-transition: all 0.4s;

transition: all 0.4s; } figure.blurfilter:hover figcaption{ opacity: 1;

-moz-transition: all .4s .4s;

-webkit-transition: all .4s .4s;

transition: all .4s .4s; }

figure.slideup figcaption

{ -webkit-transform: translateY(100%);

transform: translateY(100%);

}

figure.slideup:hover figcaption

{ -webkit-transform: translateY(0);

transform: translateY(0); }

.pixel

{ width: 1em !important;

filter: none !important;

display: inline-block; }

figcaption { overflow-y: scroll; }

</style>

​

<! –– IMAGE URL AND TEXT ––>

<figure class="blurfilter slideup"><img src="https://media.discordapp.net/attachments/890617367284027443/973075508524888124/on_Twittero.jpg?width=581&height=581"><figcaption>  Insert the contents of the box here. Adding images here is a little bit tricky because you have to create a special class to size the image and make sure it doesn't blur with the background image on hover. See ".pixel" above and how the image next is tagged "class='pixel'". In order to give an image a class, just add class="classname" add the end of the tag before the brackets cut off. THe class name here is "pixel". Here's a pixel. <img src="https://gnome.crd.co/assets/images/people/25a5305f.gif?v=bc6557bf" class="pixel">

    </figcaption></figure>