Overlapping text over an image

I have an element

The HTML for it is

		<div class="box-wrapper">
		    <div class="box">
		        <div class="latest-box">
		            <!-- .media -->
		            <div class="media">
		                <!-- image -->
		                <a href="#carrie"><img src="http://www.teamluke.net/wordpress/wp-content/uploads/2016/02/carrie-1.jpg" class="img-responsive" title="" alt=""></a>
		                <!-- image -->
		            </div>
		            <!-- .media -->
		            <!-- content -->
		            <div class="content-wrapper">
		                <div class="content">
		                    <!-- cause meta -->
		                    <div class="meta clearfix">
		                        <a class="pull-left" href="#carrie">Nutritionist</a>
		                    </div>
		                    <!-- .cause meta -->
		                    <!-- excerpt -->
		                    <div class="excerpt">
		                        <h6><a href="#carrie"></a>
		                        </h6>
		                        <p></p>
		                    </div>
		                    <!-- .excerpt -->
		                    <!-- rised slider meta -->
		                    <div class="slider-meta clearfix">
		                    </div>
		                    <!-- .rised slider meta -->
		                </div>
		            </div>
		            <!-- .content -->
		        </div>
		    </div>
		</div>

Im trying to overlay the text over the image so it looks like I need to target the .content wrapper to make it do its thing so that the box-wrapper class doesnt see it, but how do I do it? do I do something like

.box-wrapper {
position:relative;
}
.content-wrapper {
position:absolute;
z-index:99;
}

The example image looks like the text “Nutritionist” is being added beneath the image rather than overlaying it. Do I musunderstand?

I don’t understand why the image and text are in different containers and why they have separate anchors.

its in the wordpress template like that, I dont know why they made that design thing, its way stupid in my opinion.

1 Like

Don’t you love 'em. Why use two divs when you could use nine? Or something more semantic like a figure and figcaption.

2 Likes

Not far off.
Apply position: relative to .latest-box not .box-wrapper, because it’s the direct parent of .content-wrapper.
With .content-wrapper no need to z-index, that won’t change the x y positioning at all, and the caption is after the img in the flow, so will be on top by default. Remove z-index and add bottom: 0 to place the caption over the image at the bottom, or give it a value to nudge it up a bit.

            .latest-box {
                position: relative;
            }
            .content-wrapper {
                position: absolute;
                bottom: 0;
            }
1 Like

thanks, I always wondered if it was a typo when someone call wordpress turdpress, but I see now.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.