The positioning of a div element is not functioning as expected

I am currently updating my portfolio project. The page I am working on includes an image with a specific date displayed on it. I want to add text below the image, but I am encountering some issues:

The text I want to include is meant to be a link, like this: https://i.sstatic.net/PtCgM.jpg

However, whenever I try to use a div tag to insert the text, it always ends up outside of the picture. I suspect there may be a specific placement for the div tag that I am missing?

<div class="portfolio logo" data-cat="logo">
   <article class="block-thumbnail">
   <a href="#" class="block-thumb">
      <div class="date">
         <span class="day">10</span>
         <span class="month">aug</span>
         <span class="month">2016</span>
      </div>
   </a>
   <div class="portfolio-wrapper">
      <div class="portfolio-hover">
         <div class="image-caption">
            <div class="col-md-4 col-sm-6 col-xs-12">
               <h2>link</h2>
            </div>
         </div>
         <a href="services.php"><img src="img/portfolios/logo/5.jpg" alt="" /></a>
      </div>
   </div>
</div>
htmlcss

Answer №1

When discussing the h2 element, it is contained within an element that remains hidden by default and only becomes visible upon hover.

To restructure this, I will relocate it outside of the .image-caption div

    <div class="portfolio-wrapper">
        <div class="portfolio-hover">
            <div class="col-md-4 example col-sm-6 col-xs-12">
                 <h2>link</h2>
            </div>
            <div class="image-caption">
            </div>
            <a href="services.php"><img src="img/portfolios/logo/5.jpg" alt="" /></a>
        </div>
    </div>

and applying the following styles to it:

 .example {
        position: absolute;
        bottom: 0;
        z-index: 1;
        text-align: center;
        left: 0;
 }

Make sure to adjust the bottom and left values according to your specific design requirements

Answer №2

When styling your image-caption class, be sure to set it to absolute positioning to avoid any potential conflicts with surrounding elements. Here is a helpful resource on how to achieve this: Positioning image caption relative to parent element. Additionally, remember to properly adjust the z-index to ensure the caption appears correctly in front of the image.

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

Embeddable video player failing to adjust size properly within parent div

I've been tackling the challenge of making iframes responsive within a div element, but I've hit a roadblock. While there are plenty of solutions available online, none seem to work seamlessly when dealing with YouTube video embeds. Currently, m ...

cssiframeresponsive-designskeleton-css-boilerplate

Using jQuery to toggle the visibility of div elements while displaying an indicator

A query arises regarding the utilization of JQuery to facilitate toggling the visibility of text divs. The question pertains to how one can incorporate an indicator - such as an up and down arrow graphic - to denote whether the divs are open or closed. Sug ...

jquerycssshow-hide

employing the display flex property triggers the emergence of a lavender border

This is an example of a basic HTML structure: <section id="teasers"> <div class="wrapper"> <a href=""> <div class="redbox"> <h2 class="two-lines uppercaseme lowercaseme"> ...

htmlcssflexbox

Adding clickable padding to a Draft.js editor can enhance the user experience and make the editing process

Is there a way to apply padding to the Draft.js Editor so that clicking on the padding area selects the Editor? If I add padding directly to the container div of the Editor, the padding displays properly but clicking on it does not enable writing in the E ...

javascriptcssreactjsdraftjs

Ways to prevent body content from overlapping with footer content and appearing below

Currently, I am utilizing an autocomplete text box where the scroll bar exceeds based on dynamic values. However, if more values are displayed in the text box, the scroll bar automatically extends to exceed the footer of the page, resulting in two scroll b ...

jqueryhtmlcssautocompleteoverflow

What is the process for altering the active status in pagination?

How can I make the active class in my pagination appear in red? Here's the code snippet I have: In my script.js file: $(".pagination").append("<li class='page-item' id='previous-page'><a class='page-li ...

javascriptjquerycsspaginationanchor

Tips for scaling an image to perfectly fit the browser screen

I have spent a significant amount of time researching and coding, but I am still unable to get this seemingly trivial task to work. Here are the conditions: The browser window size is unknown, so any solution involving absolute pixel sizes will not work. ...

htmlcss

How can I automatically disable certain checkboxes when a specific radio button is selected?

Looking to disable certain checkboxes when a specific radio button is selected. For instance, selecting the first radio button with the id="pz1" should disable checkboxes with matching id values from the thisToppings array. Each radio button cor ...

javascripthtmlarraysdom

What are the strategies employed by Wix in utilizing mobile and desktop CSS?

While browsing through Wix, I stumbled upon something quite intriguing that left me puzzled. On a desktop with a width of 2560px, the Wix page loaded normally. But what caught my attention was when I resized the screen to make it smaller, either by using ...

htmlcssvelo

Utilize HTML to place text above an image within a TextView

While working with a list of Strings that I add to TextViews individually, I encounter an issue with displaying images alongside the text. The HTML format allows me to include images within the text, but currently, the image appears below the text instea ...

javaandroidhtml

"activeStyle" attribute consistently being implemented on links within pagesindex.js

Just starting out with Gatsby/React and web development in general, so apologies if this is an easy fix. I'm facing an issue that I can't seem to solve. Currently, I'm working on my website's header and trying to create links to naviga ...

htmlreactjsgatsby

Tips for preventing H1 from taking up the entire div

I'm currently working on developing a new theme for my WordPress website. One issue I've encountered is that the h1 element is causing the top menu to appear below it instead of on the same line. Can anyone help me overcome this challenge? Here& ...

phphtmlcsswordpress-theming

Apply a different color to every other header using the nth-child selector

I'm attempting to create alternating color headers without defining multiple header styles. I've opted to use the nth-child selector for this purpose, but I'm having trouble achieving the desired colors. JSFiddle: http://jsfiddle.net/CRh6L/ ...

htmlcsscss-selectors

Adding an overlay to a material UI table row: Step by step guide

My code is rendering a row in the following format: `<TableRow key={row.name} > <TableCell>{row.empId}</TableCell> <TableCell>{row.userId}</TableCell> <TableCell>{row.name}</TableCell> <TableCell>{r ...

javascriptcssreactjshtml-tablematerial-ui

Issue encountered while appending new rows to the tbody of a table

I'm encountering an issue with the append function within a for loop in my code. The string being passed to the function isn't parsing correctly and results in an error. How can I go about resolving this problem? Thanks! function getDetailPopUp ...

javascriptjqueryhtml

Representation of a family tree in CSS showcasing multiple sub-parents (both many to one and one to many relationships)

I've come across various family tree presentations. I'm curious if it's possible to display a one-to-many and then many-to-one structure? Currently, the flow is linear stop after stop, but I'd like to incorporate multiple steps that con ...

cssfamily-tree

Exploring the ins and outs of utilizing pseudo selectors with material-ui

I've been attempting to accomplish a simple task. I wanted to toggle the visibility of my <TreeMenu/> component in material UI v1 using pseudo selectors, but for some reason it's not working. Here is the code: CSS: root: { ba ...

cssreactjsmaterial-ui

Aurelia-powered DataTable plugin for effortless data updating

I'm currently utilizing the DataTables and DatePicker plugins along with Aurelia in my project. The goal is for the user to select a date, which will then prompt the data table to display the corresponding data for that specific date. However, I' ...

javascriptjqueryhtmldatatablesaurelia

What is the best way to insert fresh input values into a different element?

click here to view image description I am working with an input element where I take input values and store them in an element. However, I would like to know how to input new values into the next element. Any assistance would be greatly appreciated. Thank ...

javascripthtmlvisual-web-developer

What is the best way to achieve full screen in HTML5 using Libgdx?

Can someone provide guidance on how to maximize the canvas in HTML5 LibGDX? I seem to only come across the width and height properties in GwtApplicationConfiguration. ...

htmlgwtbrowserlibgdx