can't get z-index to work on an image

Hello,

I have been playing around with this all morning trying to get an image to show on hover and show above the elements.

I am using this code to get the image to show on hover:

.plain-text-container:hover {
position: relative;
}
.plain-text-container:hover:after {
content: url("http://dev-seagreens.stractical.marketing/wp-content/uploads/sites/7/2016/05/IMAGE-footer-values-balance.jpg");
display: block;
position: absolute;
}

It works fine in upfront, but on the live site the image is showing behind the elements. I have tried adding in z-index: 99999 !important; in the above with no success

I also tried adding this below in the theme but that didn't work either:

#text-object-1464080277891-1231 {
z-index: 99999;
}

Any ideas how I can get this image to show on hover and appear in front of the elements it covers?

Many thanks
Scott