Hover Text on Widget Image

style.css

/* Replace the width and height values with your image's width and height */
/* You may need to play with the margin-top and margin-left values to get the hover effect lined up exactly over your image */
.hover-text {
    width: 250px;
    height: 184px;
    display: none;
  	margin-top: -193px;
    margin-left: 13px;
}
/* This uses a black background with 75% opacity, and white text that is aligned in the center. Adjust as necessary. */
.widget-4:hover .hover-text {
	  background: #000;
    opacity: 0.75;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* If you have multiple widget images who will use the same hover settings 
you can add on to the first line with comma separating multiple widget areas */
/* .widget-4:hover .hover-text, .widget-5:hover .hover-text { */