castaway | : boat : Discover , subscribe , and listen to podcasts | Awesome List library

I've been working in R with some IMDB data that they publish, and have been stuck on this for embarrassingly long today.

I have 7 images that I'm trying to display horizontally within a row. I'm using bootstrap to write this. What I'm trying to achieve should look like this:

When the page gets resized, these images should stay proportionate to one another, until eventually at mobile (425px and below), when they should collapse into 1-column rows.

What I've tried so far looks like this:

HTML:

Currently, when you hover over in image, the opacity gets lighter:

https://jsfiddle.net/vo1npqdx/1268/

This is correct, but now I also want some link text to appear on top of the image as well. I tried to follow the solution in this example:

How to show text on image when hovering?

But when I tried this technique, empty space appears below the image, the text doesn't show up on top, and it isn't centered over the image:

https://jsfiddle.net/vo1npqdx/1269/

I can't seem to figure out how to make the paragraph text appear on top of the box shadow and centered using CSS - any suggestions? If not, then how would this be done with JavaScript? Thank you.

HTML:

Trying to recreate an overlay / overlay + hover effect.

In the code that works for the effect that I used earlier, the parent div gets the class thumbnail-row with the styles:

I'm trying to get an overlay or box shadow on top of a row of images. Then when you hover over these images, the opacity of the shadow should change from 0.5 to 0.8 for that image. I have already tried the pseudo technique suggested here:

How To Get Shadow With Certain Opacity Over Images CSS

And applied styles to the divs beneath the images as it was suggested here:

Why doesn't inset box-shadow work over images?

Me + several other people haven't been able to figure this out.

The goal is to get the images to look the same as the other three images above the row - the picture of the business presentation, the picture of the business meeting, and the picture of the businesswoman. Each of them have an initial box shadow over them with 50% opacity - then when you hover over the buttons (see my work, contact, and visit store), the opacity over the image should change from 50% to 80%. We want that same technique to be applied to the images in the row.

HTML:

I'm creating a form with numeric textbox that allows numbers between 12 to 30. In case, user types value other than this it should prompt an error. The following code works just like that. But I don't need this error when the page is loaded. How could I achieve it?

Code

I have created an audio playlist. It's an unordered list with several list items. The