Image Caption on Mobile Device

I used the code below to make it so that the image caption always displays on my mobile devices and it works great. What I would like to do now is modify this code to target only certain sections by using a custom css class of image-overlay. Can you help me modify this code to achieve that please? Not sure where I would add in the custom css class. Thanks!

@media only screen and (max-width: 989px) {
.av-overlay-on-hover .av-image-caption-overlay {
  opacity: 1;
  filter: alpha(opacity=100);
}}

@media only screen and (max-width: 989px) {
.av-caption-image-overlay-bg {
    background-color: rgba(0,0,0,0.2) !important;
}