.lionImage>div>img:first-child {
content: url('//static.lioden.com/images/decors/teenmale/below/rabbitsfootfern.png')!important;
display:block;
background-image:
url('//static.lioden.com/images/dynamic/backgrounds/kwazulunatal.png')!important;
}

<div class="boxcontainer"><div class="Box1">TEXT</div>
<div class="Box1">TEXT
TEXT TEXT TEXT
TEXT
TEXT</div>
<div class="Box1">TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
</div></div>
<div class="dissolveAbout"><div class="dissolveAboutTop">TITLE</div><div class="dissolveAboutBottom">TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT</div></div>

/* LARGE BOX STYLING */
.dissolveAbout {
background-image: url('LINK');
width: 797.5px;
height: 150px;
overflow: hidden;
transition: .5s ease!important;
background-color: HEXCODE-OR-RGB(A);
border: #px solid HEXCODE-OR-RGB(A);
border-radius: #px;
}

.dissolveAbout:hover {
height: auto;
transition: .5s ease;
max-height: 300px;
min-height: 150px;
}

/* LARGE BOX TITLE */
.dissolveAboutTop {
width: 797.5px;
position: absolute;
font-size: 45px;
z-index: 99;
line-height: 140px;
margin: auto;
margin-left: -10px;
text-transform: uppercase;
transition: .9s ease;
color: #6D717C;
}

/* what happens to the title when you hover over the large box */
.dissolveAbout:hover .dissolveAboutTop {
font-size: 0px;
transition: .9s ease;
}

/* LARGE BOX PARAGRAPH SECTION */
.dissolveAboutBottom {
margin: 0;
position: relative;
width: 775.5px;
height: auto;
max-height: 295px;
min-height: 140px;
margin-top: -500px;
z-index: 100;
transition: .9s ease;
padding: 5px;
background-color: HEXCODE-OR-RGB(A);
text-align: justify;
color: HEXCODE-OR-RGB(A);
overflow-y: auto;
scrollbar-gutter: stable both-edges;
}

/* what happens to the paragraph section when you hover over the large box */
.dissolveAbout:hover .dissolveAboutBottom {
margin-top: 0px;
top: 0;
transition: .9s ease;
}

/* paragraph section scrollbar styling */
.dissolveAboutBottom::-webkit-scrollbar {
width: 5px;
}

.dissolveAboutBottom::-webkit-scrollbar-track {
background: transparent;
border-radius: 5px;
}

.dissolveAboutBottom::-webkit-scrollbar-thumb {
background: HEXCODE-OR-RGB(A);
border-radius: 5px;
}

.dissolveAboutBottom::-webkit-scrollbar-thumb:hover {
background: #555;
}

/* SMALLER BOX STYLING */
.boxcontainer {
background: none;
height: auto;
padding: 0px;
display: flex;
justify-content: center;
}

.Box1 {
float: left;
background: HEXCODE-OR-RGB(A);
color: HEXCODE-OR-RGB(A);
padding: 15px;
border: none;
border-radius: 5px;
margin: 5px;
margin-bottom: 0px;
height: 150px;
width: 250px;
overflow-y: hidden; /* tells it to hide the scrollbar */
scrollbar-gutter: stable both-edges;
}

/* tells it to show the scrollbar when hovered over */
.Box1:hover {
overflow-y: auto;
}

/* smaller box scrollbar styling */
.Box1::-webkit-scrollbar {
width: 6px;
}

.Box1::-webkit-scrollbar-track {
background: transparent;
/* if you don't have the stuff below this comment, the scrollbar will go outside of the box radius */
background-clip: content-box;
border-style: solid;
border-color: transparent;
border-radius: 5px;
}

.Box1::-webkit-scrollbar-thumb {
background: HEXCODE-OR-RGB(A);
/* if you don't have the stuff below this comment, the scrollbar will go outside of the box radius */
background-clip: content-box;
border-style: solid;
border-color: transparent;
border-radius: 5px;
}

.Box1::-webkit-scrollbar-thumb:hover {
background: HEXCODE-OR-RGB(A);
/* if you don't have the stuff below this comment, the scrollbar will go outside of the box radius */
background-clip: content-box;
border-style: solid;
border-color: transparent;
border-radius: 5px;
}