Using CSS3 to showcase image captions

Question

Using CSS3 to showcase image captions

I am facing an issue with displaying captions on my images. The caption needs to display in two different ways - normal and hover. To better explain, I have included an image for reference.

Although I have made progress with a large portion of this task, I am unable to correctly show the normal caption on the image.

Can someone guide me on how to resolve this issue?

Below is a snippet of my HTML code:

<div class="slideimages">
    <div id="box-1" class="box">
        <div class="fix-caption">
           <h3>Fix Caption</h3>
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
        </div>                  
        <a href="">     
            <img class="image_scale" src="images/4750.jpg"/>
            <span class="caption scale-caption">
            <h3>Scale Caption</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
             </span>
        </a>
   </div>
</div>

View my JS FIDDLE link with CSS attached. Thank you.

html css

Answer 1

Answer №1

To resolve the issue of your caption displaying behind the image, you can add the following CSS code:

.fix-caption {
    z-index: 5;
    background-color: white;
}

If adding the above CSS does not work satisfactorily, another solution is to place the elements with the class .fix-caption lower in the DOM order. By doing this, it will give them a higher display order (remember to include a background-color as well).

DEMO 1 (z-index): http://jsfiddle.net/Zfr5c/3/

DEMO 2 (DOM order): http://jsfiddle.net/Zfr5c/2/

Answer 2

To resolve the issue of your caption displaying behind the image, you can add the following CSS code:

.fix-caption {
    z-index: 5;
    background-color: white;
}

If adding the above CSS does not work satisfactorily, another solution is to place the elements with the class .fix-caption lower in the DOM order. By doing this, it will give them a higher display order (remember to include a background-color as well).

DEMO 1 (z-index): http://jsfiddle.net/Zfr5c/3/

DEMO 2 (DOM order): http://jsfiddle.net/Zfr5c/2/

Using CSS3 to showcase image captions

Answer №1

Similar questions

The scroll feature is not functioning properly in detecting the CSS function for the final div

Reaching SVG with CSS

Adjusting a model using an input is causing a ValueError

Is there a way to dim and deactivate a button after it has been clicked once?

Vuetify's data table now displays the previous and next page buttons on the left side if the items-per-page option is hidden

What is the correct way to make an image adjust to changes in a browser's size?

The functionality of a pop-up window is not compatible with Google Maps

Tutorial on wrapping HTML content in a CDATA tag using jQuery

Introducing the World of Wordpress Blogging

The Bootstrap Carousel unfortunately does not provide the option for responsive images

What could be causing my HTML to not display properly after making changes to a text node?

Transform a Microsoft Word table into HTML code

Interactive HTML5 canvas: Dragging and dropping multiple items

Constantly refreshing on its own, the page never stays still

I'm encountering a major issue trying to properly position a background image to fill the entire screen

Removing the dividing line between columns in an Antd table: A simple step-by-step guide

The dynamic breadcrumb feature requires that only variables be passed by reference according to strict standards

Utilizing DOMXPath to select and click a row within a dynamic table based on the presence of 2 specific innerText values

Unable to trigger mouse event for a div that is positioned on top of an image

What is the best way to add multiple values to a single column but on separate rows?