Image overlay too wide

Wappler General Need Help
1

I have an image with a column as overlay.
CSS for the overlay column is:
position: absolute; bottom: 15px; background-color:#658cc1; margin-left: 0px; margin-right: 0px;

But the overlay column is wider than the image. Is there a way to make column equally wide to the image?

stickout
stickout1259×476 155 KB

2

Can you provide a link to your page where we can check your whole page / other elements styles?

3

http://preamke.nl.web214.hostingdiscounter.nl/abasic.php

4

It won’t work like that. I see a few mistakes in your layout and styling.
You need:

html

<div class="col">
    <div class="img-overlay-wrapper">
        <img src="upload_album/frontimg.jpg" class="img-fluid">
        <div class="overlay-text text-white">
            <h1>Title here</h1>
        </div>
    </div>
</div>

css

.img-overlay-wrapper {
    position: relative;
}
.overlay-text {
    position: absolute;
    bottom: 15px;
    background-color: #658cc1;
    width: 100%;
}

see - much cleaner solution - that’s all. Also, avoid using style2 and similar as classes and always name your elements classes.

1 Like
5

Thanks Teodor