there! I am new to this system so please let me know if

Hi there! I am new to this system so please let me know if I'm not using it correctly. I am trying code a CSS animation in my website. My site url is currently http://kathyfish.com/about-the-program/. Here is the code I've written. I'm trying to get a shadow to show behind a box when hovered over.

/* Blurb Animation */
.et_pb_blurb_0.et_pb_blurb {
position: relative;
display: inline-block;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
transition: all 0.3s ease-in-out;
}

.et_pb_blurb_0.et_pb_blurb::after {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
box-shadow: 0 15px 15px rgba(0,0,0,0.5);
transition: opacity 0.3s ease-in-out; }

.et_pb_blurb_0.et_pb_blurb:hover::after {
opacity: 1;
}

When you go to the bottom of the site page and hover over the "blurb" at the very bottom (white background with "thumbs up" icon) a shadow appears...to the right and down. It's supposed to be behind the white box. I know my positioning is off but I can't figure it out.

Many thanks for your help!

Kathy