html – Overlay not responding to image / container width?

I’m trying to make overlay banners on some images. I’ve created an overlay and it works on images, but I’m having some trouble. First, the width is not equal to the image below. Both are set to 100%, yet it does not match when the screen size changes. Second, the overlay deviates from the image below, which it should not.

I have tried to change the width of the overlay, container and image 100%, to no avail. I’m not sure what to try next.

I have the code pane setup, but my overlay code is down.

.overlay {
                position: absolute; 
                bottom: 0; 
                background: rgb(0, 0, 0);
                background: rgba(0, 0, 0, 0.5);
                color: #f1f1f1; 
                width: 100%;
                height: 15%;
                transition: 1s ease;
                color: white;
                font-size: 20px;
                padding: 20px;
                text-align: left;
                font-family: LicensePlate;

Add a Comment

Your email address will not be published. Required fields are marked *