Main Article Holder containing Image overlaid with Post Details

I'm struggling to achieve something seemingly simple but can't quite get it to work.

My goal is to display article previews on my website in a tiled format.

For example, the tiles would have a fixed height and width, say 300px by 300px.

I'd like the article title and maybe a short excerpt to appear overlaying the image, similar to what theverge.com does.

I need help with setting up a proof of concept mockup. I can handle the specific styling myself, but I'm stuck on the structure.

I can't seem to make the h1 overlay the img properly.

I've tried putting both elements within separate div containers inside a parent container, and then positioning the container with the h1 or "post info" absolutely.

But no matter what I try, it doesn't quite work out as expected.

HTML:

<div class="container">

    <div class="feat-img">
        <img src="www.sample.com"/>
    </div>

    <div class="post-info">
        <h1>Post Title</h1>
    </div>

</div>

CSS:

.container: {width: 300px; height:300px;float:left;}

.feat-img img: {width:300px; height:300px; float:left;}

.post-info: {position:absolute;bottom:0px;}

Although I know there are issues with that style, I just put it together quickly. It captures the gist of what I'm thinking.

I would appreciate any assistance since I haven't been able to find what I need (probably because I'm not sure what I should be looking for).

htmlcss

Answer №1

To begin, it's important to understand the relationship between an absolute div and a relative one.

Next,

.feat-img {
    position:relative;
    height:300px;
    width:300px;
}

should be added to your CSS file.

Then, make sure to nest the .post-info div inside the .feat-img div:

<div class="feat-img">
  <div class="post-info">
    <h1>Post Title</h1>
   </div>  
   <img src="image.jpg"/>
 </div>

After that, use this CSS:

.post-info {
    position:absolute;
    bottom:0px; /* or adjust as needed */
    left:0px; /* or adjust as needed */
}

For a visual example, check out this jsFiddle demo: http://jsfiddle.net/ZJT6f/

Cheers,

Jeroen

Answer №2

Check out this awesome demonstration: demo

Here is the HTML code:

<div class="container">
<div class="feat-img"><img src="http://lorempixel.com/300/300/"/></div>
<div class="post-info"><h1>Post Title</h1></div>
</div>

And here is the CSS code:

*{margin:0; padding:0}
.container: {width: 300px; height:300px; display:block; position: relative;}
.feat-img img: {width:300px; height:300px; position:absolute; top:0; left:0; display:block;}
.post-info{position:absolute; top:130px; left:0; display:block; width:300px; height:300px; text-align: center; color:#fff;}

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

What is the best way to include CSS code in the output display?

I'm looking to customize the appearance of my table rows and cells. Specifically, I want the cell file name, size, etc., to be colored blue while each row should have a different color on hover. I've attempted to achieve this using CSS and variou ...

phphtmlcssdatabaseecho

Adjusting the decimal points of numbers within a table to create the illusion of a "centered" alignment within the cell

Looking for a table design featuring a column of decimal numbers, each with varying lengths before and after the decimal point, while keeping the decimal points aligned. The width of the column should be flexible, expanding to accommodate long numbers in ...

htmlcsshtml-tablealignmentdecimal

How can we parse the returned 'data' as HTML in JavaScript/jQuery to select more elements?

After receiving data from a webservice, it turns out that the data is just raw HTML without any XML headers or tags around it, but simply a piece of HTML code. <div class="Workorders"> <div id="woo_9142" class="Workorder"> <span ...

javascriptjqueryhtmlajax

Using the request.getParameter method for casting in Java

I'm really struggling to understand why I'm being instructed to cast the object returned by getParameter to a string in the code below. When I try to assign it to the String variable "user," I encounter the error 'Type mismatch: cannot conve ...

javahtml

What is the best way to implement CSS styling in the existing Vue.js template?

Currently delving into the world of Vue.js, I've discovered that styling child components is achieved by referencing classes, ids, and tags defined in the component's template. Let's take a look at the App.vue component as an example: <st ...

htmlcssvue.jscomponents

Show the final element in a list in a new and innovative style

How can I style the last item of a list differently? The issue is with the display of the last item in the list, which may go out of bounds on smaller screens. To ensure proper display, the list item "Argenti" needs to be shown in a single column. To ach ...

htmlcsshtml-listscss-multicolumn-layout

Managing the initial record in mysql

As I work on a slideshow, my goal is to dynamically change the HTML class attribute from "item" to "item active" when the first record is fetched from the database. For all subsequent records, the class should revert back to just "item." $RelatedTo=1; $ ...

phphtmlmysqlsqldatabase

Utilizing v-for and CSS Grid to showcase data effectively

I'm having trouble organizing my Vuex data with CSS GRID. It's turning out messy. My setup includes two columns: the first one for labels and the second for values. {{$store.state.stepOne.textfield[idx].label}} The code above is used to displa ...

cssvue.jscss-grid

Hover events in the browser are currently operating at a sluggish pace

When I hover over a photo, an overlay is supposed to appear. However, if I move the mouse quickly (from the top to the bottom of the page, for example), the overlay remains visible even after I stop hovering over the photo. I have tried different event ha ...

cssreactjshover

How can I adjust the size and alignment of each line within a single cell in an HTML table?

<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <style> .chess-board { border-spacing: 0; border-collapse: collapse; } .chess-board ...

htmlcsslinecell

ag-Grid incorporating new style elements

For my Angular application, I have a simple requirement of adding a CSS class when a row expands or collapses to highlight the row. I attempted to use gridOptions.getRowClass following the documentation at https://www.ag-grid.com/javascript-grid-row-styles ...

javascripthtmlcssangularag-grid

Enhancing functionality with jQuery: updating multiple input fields at

Currently, I am attempting to utilize jQuery to modify some HTML text by adjusting a slider. I have managed to accomplish this; however, I also need it to happen only if a checkbox is checked. How can I integrate both conditions and ensure that the text ch ...

javascriptjqueryhtmlcheckboxslider

Placing a freshly created item into a designated array while ensuring it is positioned at Index Value [0] rather than at [arr.length-1]

I understand that it is usually recommended to add new objects at the end of an existing array without a name. However, I am interested in exploring a more complex scenario in order to learn. Specifically, I would like to add a new object at index [0] inst ...

phphtmlarraysjson

Inserting blocks of text into a MySQL database

I'm hoping to insert text segments into a MySQL database. Below is an excerpt of my HTML code: <div class="margins3"> <h1>Meal Plan...</h1> <div id='results-container'> <div class='LeanMuscle ...

javascriptphphtmlmysqldatabase

Fundamentals of object property in jQuery and Javascript

Currently working on creating a new property named startPosition and setting the top property to equal the button's current top value in CSS. Below is the jQuery code snippet: var morphObject = { button: $('button.morphButton'), c ...

javascriptjquerycss

Display the hidden element using jQuery with the !important rule

There is a specific element that has been given a class with the following CSS styling: .cls { display:none !important; } Despite attempting to display this element using jQuery $(".cls").show(); This method does not seem to be effective. Is ...

javascriptjqueryhtmlcss

Using 2 viewports depending on the device

My website looks great on all devices and desktop, but I want to set a different viewport for iPad. I would like the iPad to have the same width as my desktop version, which is 1100px wide. Currently, the site is designed with percentages and ems up to (ma ...

cssipadviewport

Utilizing em units within CSS media queries is producing erratic outcomes on various browsers

My CSS media queries are set up in a progressive manner like the following: * { font-size: 14pt; } @media screen and (min-width:85em) { : : } @media screen and (min-width:110em) { : : } When I have two browsers open on the same screen, with identical siz ...

cssmedia-queriesfont-size

Authentication using a singular input

Struggling to design an input for a verification code with just one input instead of four. However, I am facing some challenges: The input is not responding correctly when clicked, it's a bit buggy and requires clicking at the end of the input to typ ...

htmlcss

Apply design to a dynamically generated JavaScript id using Stylus

Currently, I am utilizing a jquery datepicker widget, and my goal is to customize the CSS for its input field. However, it seems that the id assigned to that field is dynamically generated upon page load: <input type="text" id="dp1382434269539" style= ...

javascripthtmlcssjquery-uistylus