Overlay not responding to image/container width?-CodePudding

I am trying to make overlay banners on some images. I have the overlay created and it works over the images, but I'm having some problems. Firstly, the width is not the same as the image underneath. Both are set to 100%, yet it isn't matching when the size of the screen changes. Secondly, the overlay goes off of the image on the bottom, which it shouldn't do.

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

I have a CodePen set up, but my overlay code is below.

.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;
                Opacity:0;
                color: white;
                font-size: 20px;
                padding: 20px;
                text-align: left;
                font-family: LicensePlate;
}

CodePudding user response：

Because the padding in .overlay is making the divs width increase to avoid this you can use

.overlay{
box-sizing: border-box;
}

CodePudding user response：

You have quite a bit of unnecessary divs. I would recommend restructuring and you could solve some of your issues.

To answer your question, width & padding are causing your overhang. Remove the padding on .overlay, create a child element inside .overlay, and set the padding on the child.

CodePudding user response：

too many <div> and classes, use the same class for all those boxes and assign settings for all of them in CSS because I can see that they all have the same properties, and you can add overflow: hidden; to them or you can set the width:100%; to the class that appears when you hover. and for that appearing effect you can set position: absolute; to the appearing class and bottom: 200px; for example and bottom: 0; when you hover.

you have lotta options you know, just make it simple and don't use too many classes and mix up things like putting <style> into classes in HTML code.

also for those cards use the grid better, display: grid;

do it from scratch again and good luck.