<style>

figure.blurfilter{

    margin: 0;

    padding: 0;

    display: inline-block;

    position: relative;

    overflow: hidden; /

}

.figcaption img {

width: 10px;

}

figure.blurfilter img{

    display: inline-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;

}

.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'". 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>