How do I display a text box over a specific class of images in Wordpress?

Question

On my site I have an image class for external images. Every image MUST use the [caption] shortcode. I want to place a border and text box over every image in that class throughout the whole site.

So far I have...

.img-external {
     border: 5px solid #818a99;
     height: auto;
     width: 100%;  
     position: relative;
}

...shows up fine.

I want to add...

    .text-block {
        position: absolute;
        bottom: 20px;
        right: 20px;
        background-color: black;
        color: white;
        padding-left: 20px;
        padding-right: 20px;
}

...with the text "EXTERNAL IMAGE"

This works...

if ($('.img-external')[0]) {
    $('.text-block').text('EXTERNAL IMAGE');
} else {}

...

<div class="img-external">
  <div class="text-block"></div>
</div>

...in theory when I plug it all into codepen but how can I make this work on Wordpress?

Edit: Wordpress is using <figure><img class="img-external" src=""> etc., and I can't get it to work. Where do I call the text-block?

Answer 1

you have to edit yours template js and css file. Also you can add your file. More information you can find here: https://developer.wordpress.org/themes/basics/including-css-javascript/ and here: https://www.wpexplorer.com/javascript-wordpress/

Cheers

Answer 2

change this:

if ($('.img-external')[0]) {
    $('.text-block').text('EXTERNAL IMAGE');
} else {}

to this:

if ($('.img-external')) {
        $('.img-external').first().find('.text-block').text('EXTERNAL IMAGE');
    } else {}

If you want add text only for first div with .img-external class

Cheers