The figcaption element is not being shown

Could someone help me understand why my figcaption is not showing up on my website?

Here is the code I am using:

<a href="https://en.wikipedia.org/wiki/Fimmv%C3%B6r%C3%B0uh%C3%A1ls" 
            target="_blank" class="grid-box">

            <img class="grid-img" 
            src="https://www.extremeiceland.is/media/8354/lava.jpg" 
            alt="Fimmvörðuháls">

            <figcaption>Fimmvörðuháls</figcaption>
 </a>

Here is a screenshot for reference: http://prntscr.com/kfinwm

You can also view the codepen here: https://codepen.io/don0ts/pen/ajayZE

htmlcss

Answer №1

The images you have are enclosed within an <a> element, which is styled with the class .grid-box that includes an overflow property set to hidden.
Consider removing the overflow: hidden style from the .grid-box class.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The lightbox is triggered by clicking on a different div to display its content

Great news - my lightbox is up and running! Each image on my website corresponds to a different organization, and clicking on the image opens a specific lightbox. My question is: how can I have a lightbox configured so that only the trigger image is displ ...

javascripthtmlcsslightbox2

The function of starting and stopping using setInterval

I have a simple setInterval function that loops through radio buttons on load. I am looking to add a button that can start or stop the loop. I have added a click function for the button, but I am unsure how to stop it afterwards. Here is my progress so fa ...

javascriptjqueryhtml

How can CSS be used to create a responsive form script?

We have enlisted the services of an SEO provider through upcity.com, which necessitates us to embed a form on our website. However, we are facing challenges with the responsiveness of the form on mobile devices, which undermines our efforts. Therefore, I a ...

htmlcssresponsive-design

End the div element upon completion of the Vimeo video

I am in need of a website that includes an intro video displayed as a full-width div over the background content. To achieve this, I created a Div containing an iframe video from Vimeo along with a button to skip the intro (which closes the div upon clicki ...

javascriptjquerycssvimeovimeo-api

Incorporating a Bootstrap table within another table and adjusting the table height

I am facing a minor issue on my website. I am utilizing bootstrap 4 and within the table box, I have nested another table as shown in the image below. How can I adjust the height of the inner table to match the height of the box (td)? https://i.sstatic.ne ...

htmlcsshtml-tabletwitter-bootstrap-4

Combine one CSS property in Emotion

Having some trouble creating reusable animations with Emotion. I've defined a fadeUp animation that works well: export const animatedFadeUp = css` opacity: 1; transform: translateY(0); `; export const fadeUp = css` opacity: 0; transform: tran ...

javascriptcssreactjsemotion

Clicking anywhere within a <div> element triggers a page redirect

Currently in the process of designing a website, I have come across a perplexing issue. On the page "samgatha.org/register.php", every time I click within the form-box, the redirection always leads back to "samgatha.org/register.php". Identifying and resol ...

phphtml

Can you provide me with steps to customize my mouse cursor specifically when hovering over the canvas?

I own a .cur file and I desire to utilize that specific cursor image whenever my mouse hovers over the canvas element in Google Chrome. <body> <canvas id="canvas" width="600" height="405" style="position:relative; background: black;" onc ...

csshtmlhtml5-canvas

Is there a way to eliminate the grey overlay on images within a Slick Slider carousel using custom CSS?

Currently, I am working on customizing images within a header carousel in WordPress that utilizes slick slider. However, I have encountered an issue where the text overlay, which is originally a bright white font in Photoshop, changes to a dull grey colo ...

csswordpressslick.js

css determining the width through calculation

I am facing a challenge with a math problem. My content box is 700 pixels wide, and my hentry (inside content) is 100% wide with padding of 10 pixels. This causes the hentry to be wider than the content, resulting in an overflow... Does anyone have a so ...

csswordpress

Text gently appearing and disappearing within a block

I’m looking to create a smooth fade effect for the content inside a block that is being dynamically changed by script. Instead of an instant change, I want the old content to fade out and the new content to fade in gradually without using jQuery — just ...

javascripthtmlcssfade

Guide on showcasing the outcome of my PHP using AJAX

I am looking to display the count result from my count.php on my index page. I want to automatically count the number of rows in the user_code table and show the result on the index page every time it is visited. However, I am facing an issue where the AJ ...

phpjqueryhtmlajaxpdo

What causes Chrome Extension Images to appear broken when they are inserted into the DOM?

Currently working on a Chrome extension, I am attempting to insert a div with a background image into the DOM using a content script. The CSS is loading correctly, and upon inspecting the Developer Tools, the image URL appears to be correct. $('.clos ...

javascriptjqueryhtmlcssgoogle-chrome-extension

What is the best way to define line length in Bootstrap?

I have the following HTML: .line { width: 100%; height: 14px; border-bottom: 1px solid lightgrey; position: absolute; } .circle { height: 24px; width: 24px; background-color: lightgrey; border-radius: 50%; display: inline-block; } < ...

htmlcssbootstrap-4

Responsive input form causes floating label to be positioned incorrectly

I have crafted a form using Django, Crispy Forms, and Bootstrap. When the screen width is above 575px, everything looks great with fields of appropriate width and floating labels in their correct position. However, when the screen width drops below 575px, ...

htmlcssbootstrap-5

How to position footer at the bottom of Material UI cards - see example below

After getting inspiration from the material-ui example of cards, I wanted to create a grid layout with multiple cards. My goal was to make all the cards have equal height (which I achieved using height:100%) and position the footer at the bottom of each ca ...

javascriptcssreactjsmaterial-ui

How to display a PDF file stored in the documents directory of an iOS device with Phonegap

I'm encountering an issue when it comes to displaying a PDF using HTML, PhoneGap, or JavaScript. The web application I'm working on is developed in Sencha Touch 2. Here's exactly what I need: I need to display a PDF file located in the d ...

javascripthtmlcordovaphonegap-plugins

Where can I find the specific code needed to create this button style?

There is a button here for adding an event, but unfortunately, the style code is not displayed. Is there a way to obtain the full cascading style sheet for this button? ( ) ...

javascripthtmlcss

The issue with footable's removeClass function not functioning properly on an extended row was

Footable is used for a mail inbox, with rows loaded via AJAX and unread mails marked as bold using custom CSS implemented in the JSON on the server side. When expanding a row, the goal is to remove the css-class, achieved through: .on({'expand.ft.row ...

jquerycsswordpresshtml-tablefootable

Begin highlighting the columns in the table with color starting from the Nth column onwards using the td

Is there a more efficient way to apply a specific background color to multiple columns in a table without using a CSS class for each column? I have a large table with many rows and columns, and I want to minimize unnecessary code. Currently, I am utilizi ...

htmlcsscss-selectorscss-tables