Text alignment from the lower edge

Imagine having a title inside an image, positioned near the bottom with a negative margin-top. The issue arises when the text orientation expands from top to bottom as more content is added. Is there a way to reverse this, so that the text div grows towards the top based on its size?

Any suggestions or solutions would be greatly appreciated.

You can view an example here

HTML

<div class="image">
    <img src="image.jpg">
    <div class="title">This is a title</div>    
</div>
<div class="image">
    <img src="image.jpg">
    <div class="title">This is a long title...</div>    
</div>

CSS

.image {
    width: 800px;
    height: 530px;
    margin: 10px;
}
.title {
    position: absolute;
    background-color: #CCC;
    max-width: 600px;
    margin-top: -80px;
    padding: 5px;       
}
htmlcss

Answer №1

Here is the solution you've been searching for - just apply .image position:relative and .title bottom:0; here

<div class="image">
    <img src="http://s23.postimg.org/g033nno17/image.jpg"/>
    <div class="title">This is a unique title that will catch your attention. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>    
</div>
<div class="image" style="background:red;">
    <img src="http://s23.postimg.org/g033nno17/image.jpg"/>
    <div class="title">Another eye-catching title to enhance your design. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>    
</div>

.image {
    width: 820px;
    height: 530px;
    margin: 10px;
    position:relative;
}
.title {
    position: absolute;
    display:block;
    background-color: #CCC;
    padding: 5px;   
    bottom:0;
    width:790px;
    vertical-align:bottom;
}

Answer №2

Apply the style position:absolute;bottom:0; to the title

Answer №3

Would you be open to trying something new?

Take a look at this new example.

I have also included a hover effect to display the title.

HTML

<div class="box" style="background-image: url('http://placeholder.com/200/150');">
    <div class="titleBar">Sample Title</div>
</div>

<div class="box" style="background-image: url('http://placeholder.com/200/150');">
    <div class="titleBar">Another Long Title That Goes On and On and On</div>
</div>

CSS

.box {
    width: 200px;
    height: 150px;
    position: relative;
}
.titleBar {
    background-color: lightGrey;
    position: absolute;
    bottom: 0px;
    width: 100%;
    overflow: none;
    display: none;
    word-wrap: break-word;
}
.box:hover .titleBar {
    display: block;
}

Answer №4

Are you seeking information on the vertical-align property?

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

How to locate an element in Webdriver/Selenium when it lacks a class name, id, or css selector?

Within the search results displayed in groups of 7, you can find the address and phone number for each entry on the right side as follows: I need to extract both the address and phone number for each result. The challenge lies in how these elements are st ...

pythonhtmlseleniumselenium-webdriverwebdriver

Enhancing a popup with animated effects

I have been working on a popup that I want to add a subtle animation to. A fade effect seems like the perfect solution. Here is the code for the button: <a href="javascript:void(0)" onclick="document.getElementById('back_overlay').style.disp ...

javascriptjqueryhtmlcss

Tips on how to toggle the class of one specific element without affecting others

Whenever I click on a div, it expands. However, if I click on a collapsed one, both collapse and the first one returns to an inactive state. At this point, the last two are in both active and inactive states. And if at this time I click on the first one, t ...

javascriptjqueryclasshtml

React fullpage.js causing z-index stacking problems

Take a look at the demo here: I'm having trouble getting the 'more info' modal to display above all other elements on the screen. Here's the desired stacking order, with the highest stacked element listed first: modal nav open header ...

cssreactjsz-indexfullpage.js

Placing emphasis on a link's destination

Is there a way to automatically focus on an input field after clicking on a local href link? For example, I have the following: <a href="#bottom"> Sign up </a> And at the bottom of the page : <div id="bottom"> <input type="email" nam ...

htmlcssfocus

The webpage freezes when attempting to run jQuery with Selenium

I'm currently facing an issue where my selenium script hangs the webpage whenever I try to find an element using jQuery. The script doesn't execute and a pop up appears in the browser with the message "A script on this page may be busy, or it may ...

javascriptjqueryhtmlselenium

What events precede and follow a keydown action in a Textarea field?

I need to prevent users from pressing function keys (F1, F2, etc.), the tab key, and any other characters from being added. The code below is supposed to achieve this on my website but it's not working. document.getElementById("code").addEventList ...

javascripthtmltextarea

Using HTML and C# to Deliver Emails

I've encountered a challenge with my HTML page that includes a textbox for users to input their email. When the submit button is clicked, an email should be sent to a specific email address defined in the code, and a pop-up box indicating "Email Sent" ...

c#javascripthtmlemail

Spring REST service prevents Cross-Origin Requests with AJAX

Having Trouble Accessing Spring REST Service My spring service @RequestMapping(value = "/MAS/authenticate", method = RequestMethod.POST) public ResponseEntity<Map<String, String>> authenticate(@RequestBody Subject subject) { Map<String ...

javajavascripthtmlajaxspring

Guide to continuously play the animation, Version 2

I have been struggling with an animation that I need to loop indefinitely. The problem arises when trying to use animation-iteration-count: infinite. It seems like no matter where I place it in the code, whether within the keyframes or normal CSS rules, it ...

htmlcssloopsanimation

Using SQL to Insert Values into Select/Option

I am attempting to create a select form element with predetermined options. <select name="select1"> <option value="value1">Value 1</option> <option value="value2">Value 2</option> <option value="value3">Value 3 ...

phphtmlmysqlsqlforms

Tips for adding a CSS marker to the Videogular timeline at a designated time

My HTML player application allows users to search for a term and then displays the results along with the time when those words appear. By clicking on a specific sentence, the HTML player will start playing from that location. However, I would like to enha ...

javascripthtmlcssangularjsvideogular

Having trouble with animating the background color of an input button using jQuery?

I'm completely confused as to why the background color isn't changing despite investing a significant amount of time into it: <input type="button" class="front-consultation-btn" value="Get A Free Consultation"> <script> $(' ...

jqueryhtmlanimationcssjquery-animate

Displaying several column headers while filtering data in a table

Is there a way to prevent my table from printing multiple column headers each time I filter my results? For instance, after filtering, the same column headers are repeated. Here is an example of the issue: Below you can find the code snippet that demonstr ...

phphtmlmysqlhtml-table

Adjust the button's hue upon clicking it

The current function is operational. Upon pressing the button, it toggles between displaying "click me" and "click me again". However, I desire the button to appear blue when showing "click me" and red when displaying "click me again". <!DOCTYPE html ...

javascripthtmlcss

Pattern matching to locate text that is not enclosed within HTML tags and does not fall within certain specified tags

I am attempting to create a regular expression that will match specific words located outside and between HTML tags (but not within the tags themselves). However, I also need to ensure that these words are excluded when they appear between heading tags suc ...

phphtmlregex

Switch from using a stylesheet to implementing jQuery

In order to achieve real-time replacement, the style changes immediately after a user interaction: $('link#mystyle').attr('disabled', 'disabled'); $('link#mystyle').remove(); if(new_style){ $('head').ap ...

jqueryhtmlcssstylesheet

Arrange images with haphazard placement

Can someone guide me on creating a block of images when working with an array of random items? ...

javascripthtmlcssreactjsimage

Automatically resize ui-select dropdown box to the left side

I've been tasked with incorporating AngularJS ui-select into my project, specifically creating a multiselect dropdown. Currently, the dropdown box automatically adjusts its width based on the length of the longest selectable text, causing it to extend ...

javascripthtmlcssangularjsui-select

CSS3 columns causing <li>s to be cropped

I'm attempting to implement css3 columns with a list (<li>), but I'm running into some issues getting it to function properly. I have wrapped the <ul> in a div like this: .ul-container { -moz-column-width: 310px; -moz-column-gap ...

htmlcssmultiple-columns