How can you position an image overlay with multiple text elements using the 'align-items-end' property, all within a block layout?

I am facing a challenge in creating an image with overlay text (H3 above a p), where the text should be displayed at the bottom left without breaking the block and going inline. Currently, with my code, I am seeing the block elements of text change to inline and display side by side at the bottom. Any suggestions on what I might be missing that is causing this issue?

<div class="col-4 p-0">
   <img src="imgs/design.jpg" class="img-fluid">
   <div class="card-img-overlay d-flex align-items-end">
      <h4 class="card-title">What's Next?</h4>
      <p class="card-text">Is this the end?</p>
   </div>
</div
htmlcssbootstrap-4

Answer №1

//HTML

      <div class="card h-100">
           <img src="/photos/dummy-01.jpg" class="card-img" alt="" />                                 
           <div class="card-img-overlay d-flex flex-column justify-content-end align-items-start">
                <h5 class="card-title">Master of Business Administration</h5>
                <div class="card-text">
                    <p>Executive Program</p>
                </div>
           </div>
        </div>

    //Styling 

        .card{
           width: 100%;
           border-radius: 0;
           border: 0;
           margin-bottom: 20px;
           overflow: hidden

           .card-img{    
               height: 100%;
               width: 100%;
               object-fit: cover;
               transition: all 0.4s linear;
           }

           .card-img-overlay {
               position: absolute;
               top: 0;
               right: 0;
               bottom: 0;
               left: 0;
               padding: 1.25rem;
           }
        }

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 can I override the maximum body width to enable specific div elements to extend beyond that limit?

While I've come across similar questions to mine, none of them seem to solve my specific issue. Essentially, I've set the body width to 960px, which is a common standard practice. However, there are certain elements such as header, footer, and so ...

htmlcss

Display the output of awk on a single line for specific columns

Here is a file called "test" that displays the following information: vserver share-name path acl TEST_SERVER TEST_SHARE_PATH /TEST/TESTSHAREPATH "test\testuser / Read","test\testuser1_R / Read","test\testuser2_RW / Change ...

htmlawk

Restrict the duplication of div elements with JQuery

Here is the structure I'm working with: <div class="checkmark-outer"> <div class="checkmark-33"> <div class="fa-stack fa-1x checkmark-icon"> <i class="fa fa-circle fa-stack-2x icon-background"></i> ...

javascriptjqueryhtmlcsslimit

Is it possible to substitute the input field in the filter component with a Material UI text field instead?

I am attempting to replace the input field for filter components with a text field from materialUI. Despite successfully displaying the input field by creating a new component, it is not filtering contents as desired. My goal is simply to replace the inpu ...

cssreactjsmaterial-uigriddle

Looking for the optimal method to display numerous lines of text in HTML, one by one, at intervals of 60 seconds?

I'm working on a display page for my website. The main text in the center needs to change every 60 seconds. I have over 150 individual lines of text that I want to cycle through on the page. What would be the most efficient way to load all these te ...

javascriptcssajaxhtml

During DragAndDropToObject in Selenium IDE, the initial element in the list is overlooked

I have a webpage that is split into two datagrids. The left datagrid is structured like this: <ul class="left_dg"> <li> <ul></ul> </li> <li> <ul></ul> </li> <li&g ...

jqueryhtmlcssseleniumdrag-and-drop

switching the image source by selecting different options from a dropdown menu and leveraging JavaScript

I have been attempting to change the src of an image using JavaScript's addEventListener, but for some reason it is not working. Here is an example to illustrate my issue: let bulbImage = $.querySelector(".bulb-image"); let turnOnOption = $.querySele ...

javascripthtmlcssfrontend

Prevent the elongation of HTML select elements in Bootstrap

Struggling to set the size of an HTML "select" field in Bootstrap 3 (latest) to normal width instead of 100%? Looking for a cleaner solution than resorting to tables or adding fields within bootstrap columns that might cause indentation issues due to borde ...

htmlcsstwitter-bootstrap

Implementing CSS to effectively scale images within a fixed box size

I am attempting to create a collection of images with rounded borders that will expand on hover, while staying within a specified box size. I want the effect to give the illusion that the image is only zooming inside the box and not physically enlarging on ...

htmlcss

I am eager to design a form input field within the vuetify framework

https://i.sstatic.net/zbCfI.png I'm having trouble creating a text field in Vuetify where the button and height are not behaving as expected. I've attempted to adjust the height multiple times without success. Although I have the necessary CSS, ...

cssvue.jsnuxt.jsvuetify.js

The left margin is malfunctioning

As a newcomer to css, I am struggling with adding margin-left to my paragraph and <h2>, and it's not taking effect. I have a 700px div and I want to add a 10px margin-left to both <p> and <h2> in relation to the image. Despite my e ...

htmlcss

Trigger a function upon clicking a DOM element in Vue.js

My goal is to trigger a function whenever I click on elements in the DOM that have a specific class. Despite my efforts, the functionality doesn't seem to work, and no errors are being reported. Here's the relevant code: methods: { ...

javascripthtmlvue.jsvuejs2vue-component

Utilizing a custom keyboard with Jquery for a recurring function

It seems like I might be missing something simple here, as I am following the code tutorial provided in the link below: The goal of this project is to create a popup keyboard for a touch screen. Although I have made some modifications for specific purpose ...

javascriptjqueryhtmlcss

Scroll sideways with AJAX content replacement

I've successfully discovered various methods for loading and replacing content with ajax, as well as ways to hide/show with effects. However, I'm now seeking a technique that allows the new content to slide into a div while the old content slide ...

jqueryhtmlajaxpluginsanimation

What is the best way to display a Bootstrap alert above all other elements on the page?

I need help with adjusting the placement of my bootstrap alert. Currently, when the input box value is not valid and the button is clicked, the alert shows up below the input box. I would like it to appear in the middle of the page, on top of the text box. ...

javascriptcsstwitter-bootstrapbootstrap-5alert

Ensure your mobile site is optimized for full width display

Imagine a webpage with a fixed width of 1280px. Is there a way to instruct a smartphone to automatically scale this page to full width upon loading? Currently, I am using: <meta name="viewport" content="width=1280, initial-scale=1"> However, it d ...

htmlcssmobile

What is the process for adjusting the width of an element using JavaScript?

I have a unique bar with one half red and the other green. I am trying to subtract 1vw from the width of the red section. Unfortunately, using style.width is not yielding the desired result. See below for the code snippet I am currently using: //FIGHT do ...

javascriptcsswidth

Make the button appearance change when being clicked different from when being hovered over

I'm trying to create a button that changes background color when hovered over, but maintains the button color without a background color when clicked. This is what my current code looks like: .windowButton:hover { background-color:#1a82b8; } .win ...

csshover

Is there a more efficient method for replacing all attributes on cloned elements?

While this code does the job, I can't help but feel like it's a bit outdated. I'm not very experienced with JS/JQuery and only use them when necessary. My approach involves cloning an element and then replacing all of its attributes with on ...

javascriptjqueryhtml

Checkbox: Activate button upon checkbox being selected

On my webpage, I have a modal window with 2 checkboxes. I want to enable the send button and change the background color (gray if disabled, red if enabled) when both checkboxes are selected. How can I achieve this effectively? HTML: <form action="" me ...

javascriptjqueryhtml