<style>

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;

}

figure.blurfilter figcaption{

    position: absolute;

    display: block;

    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;

    -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.blurrotate figcaption{

    -webkit-transform: rotate(10deg);

    transform: rotate(10deg);

}

figure.blurrotate:hover figcaption{

    -webkit-transform: rotate(0);

    transform: rotate(0);

}

.pixel {

width: 1em !important;

filter: none !important;

display: inline-block;

}

figcaption {

overflow-y: scroll;

}

</style>

<figure class="blurfilter blurrotate">

    <img src="https://media.discordapp.net/attachments/890617367284027443/973075508524888124/on_Twittero.jpg?width=617&height=617" >    

    <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'". See below for an image. Because of how the code is, the image won't align with text. I'll work with this the next couple of days to make it so you can add pixels with inline.<img src="https://gnome.crd.co/assets/images/people/25a5305f.gif?v=bc6557bf" class="pixel">

    </figcaption>

</figure>