OK, so this may be getting too complicated for CSS/HTML to handle, but I

Question

0

Asked: May 30, 20262026-05-30T10:27:23+00:00 2026-05-30T10:27:23+00:00

OK, so this may be getting too complicated for CSS/HTML to handle, but I

0

OK, so this may be getting too complicated for CSS/HTML to handle, but I may as well ask.

I have some dynamically placed images using the code from here.
What I would like to add to those images, is a text overlay with a transparent background.
Something like this.

I think the issue is to do with the floated images. Also possibly the fact that my images are also links. I’ve tried a lot of variations and guides, but just can’t seem to figure out why it’s not working. I don’t care about the images having opacity, I don’t think that’s affecting things. Current code gets the text next to the image. Example can be seen here.

HTML;

<div id="internal">
    <div id="row2">
        <a href="studies.php"><img src="images/gallery/studies/STUDY1.jpg" width="200" height="200" alt="Studies Gallery"/></a><h2><span>Some text.</span></h2>
        <div id="movers-row2">
            <div><a href="mediaunits.php"><img src="images/gallery/mediaunits/media1.JPG" width="200" height="200" alt="Media Units Gallery"/></a></div>
            <div><a href="freestandingfurniture.php"><img src="images/gallery/freestandingfurniture/furniture1.JPG" width="200" height="200" alt="Furniture Gallery"/></a></div>
        </div> <!-- end #movers -->
    </div> <!-- end #row -->
    <div style="clear: both;"></div>
</div> <!-- end #internal -->

CSS;

#internal
{
    width: 958px;
    height: auto;
    background-color: white;
    border: 1px solid #ccc;
}

#row2 {
    min-width: 480px;
    display: block;
    border: 0px;
}

#row2 a img {
    position: relative;
    background-color: black;
    opacity: 0.7; /* transparent */
    filter:alpha(opacity=70); /* IE transparent */
}

#row2 h2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    float: left;
}

#row2 span {
    color: white;
    font: bold 24px Helvetica;
    letter-spacing: -1px;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
}

#movers-row2 {
    margin: -204px 0 0 200px;
    height: auto;
    overflow: hidden;
}

#movers-row2 div {
    width: 49.9%;
    float: left;
}

#movers-row2 div img {
    float: right;
}