Full image with stylish CSS text overlay

I'm having trouble displaying an overlay text that should look like: https://i.sstatic.net/GccZy.jpg

This is what I've tried:

<div class="row">
            <div class="col-md-3 program-cat">
                <img src="<?php echo EF_THEME_BASE_URL; ?>/images/infants.jpg" >
                <div class="program-desc">
                    Short description of Aqua Aerobics goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere, mi at pharetra tincidunt, odio ante eleifend ante, a aliquam odio urna nec nisl. Duis fermentum congue ultricies. Sed id aliquet augue.
                    <a class="btn button" href="#">Learn to Swim</a>
                    <span>Infants Program</span>
                </div>
            </div>

        </div>

Here's my CSS:

#program-cats .program-cat {
    width: 460px;
    height: 100%;
    position: relative;
}

#program-cats .program-cat img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

#program-cats .program-cat .program-desc {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate( -50%, -50%);
    color: white;
    text-align: center;
    background-color: rgba(31, 127, 134, 0.5);
    padding: 5px 0;
    border-top: 1px solid #FFFFFF;
}

I'm struggling to achieve the layout as shown in the image.

Any assistance would be greatly appreciated.

htmlcssoverlay

Answer №1

.program-cat {
    position: relative;
    display: flex;
}

.program-cat img {
    width: 100%;
    height: 100%;
}

.program-cat .program-desc {
    position: absolute;
    margin: 30px;
    width: 400px;
    color: white;
    text-align: left;
    background-color: rgba(31, 127, 134, 0.5);
    padding: 20px;
}

.program-cat .program-desc a {
   display: block;
    margin: 10px 0;
    padding: 10px 20px;
    background: #fff;
    text-align: left;
    width: 150px;
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(31, 127, 134);
}

.program-cat .program-desc .infant_prog {
   text-align: center;
   text-transform: uppercase;
}
<div class="row">
  <div class="col-md-3 program-cat">
  
    <img src="http://lorempixel.com/400/200/" alt="Aqua Aerobics"/>
    
    <div class="program-desc">
      Short description of Aqua Aerobics comes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere, mi at pharetra tincidunt, odio ante eleifend ante, a aliquam odio urna nec nisl. Duis fermentum congue ultricies. Sed id aliquet augue.
      <a class="btn button" href="#">Learn to Swim</a>
      
      <div class="infant_prog"> <strong>Infants</strong> Program</div>
      
    </div>
    
  </div>
</div>

Answer №2

Great job! You're almost there, just remember to use the left/top/right/bottom properties with the same value to achieve this layout without relying on percentage values:

.program-cat {
  display:inline-block;
  position: relative;
}

.program-cat img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.program-cat .program-desc {
  position: absolute;
  bottom: 10px;
  left:10px;
  right:10px;
  top:10px;
  color: white;
  text-align: center;
  background-color: rgba(31, 127, 134, 0.5);
  padding: 5px 0;
  border-top: 1px solid #FFFFFF;
}
<div class="row">
  <div class="col-md-3 program-cat">
    <img src="https://lorempixel.com/400/200/">
    <div class="program-desc">
      Short description of Aqua Aerobics comes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere, mi at pharetra tincidunt, odio ante eleifend ante, a aliquam odio urna nec nisl. Duis fermentum congue ultricies. Sed id aliquet augue.
      <a class="btn button" href="#">Learn to Swim</a>
      <span>Infants Program</span>
    </div>
  </div>

</div>

Answer №3

This is my unique interpretation

div#messageBox{
  background: url('https://www.familiesonline.co.uk/images/default-source/local/east-surrey/in-the-know-images/boy-swimming-underwater.jpg?sfvrsn=368f039e_0');
  background-size: 100% 100%;
  font-family: arial;
  width: 400px;
  padding: 20px
}

.program-desc{
  background: rgba(26, 127, 139, 0.6);
  color: white;
  padding: 2em;
  height: calc(100% - 4em);
  width: calc(100% - 4em);
  font-family: arial;
}

div.program-desc a{
  display: inline-block;
  margin-top: 1.2em;
  height: 2em;
  width: 10em;
  background: white;
  line-height: 2;
  text-align: center;
  text-decoration: none;
  color: rgb(26,127,139);
}
.programName{
  position: relative;
  left: -1.1em;
  top: 0.5em; 
  width: calc(100% + 0.2em);
  border-top: 2px solid white;
  padding-top: 1ex;
  padding-left: 1em;
  padding-right: 1em;
  font-size: 22pt;
  text-align: center
}
.word1{
  font-weight: 900;
  text-transform: uppercase;
}
.word2{
  text-transform: uppercase;
  font-weight: 100;
}
<div id="messageBox">
  <div class="program-desc">
      Brief overview of Aqua Aerobics goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere, mi at pharetra tincidunt, odio ante eleifend ante, a aliquam odio urna nec nisl. Duis fermentum congue ultricies. Sed id aliquet augue.<br>
      <a class="btn button" href="#">Learn to Swim</a><br>
      <div class="programName"><span class="word1">Infants</span> <span class="word2">Program<span></div>
  </div>
</div>

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

Make sure to always display the browser scrollbar in order to avoid any sudden page

Question: How can I ensure the scrollbar is always visible in a browser using JavaScript? I've noticed that some of my web pages have a scrollbar while others do not, causing the page to jump when navigating between them. Is there a way to make t ...

htmlcssbrowserscrollbar

Flip an image by analyzing the colors beneath it

Looking for a way to invert the color of specific areas under a mask (PNG) for a floating menu. Rather than inverting all at once, I want only certain parts to be inverted underneath the mask. Is this achievable, or is there another approach I should consi ...

javascriptjquerycsshtml

How to Make a Div Element Expand to Fill Unknown Space?

I have a box with the word "Test" inside it. I need to adjust its width to be 100% of its containing div, but I'm unsure about how to do this without using Javascript. The example in the jsFiddle linked below demonstrates what I am trying to achieve. ...

htmlcss

Is there a way to launch iframe links in the parent window of an Android native app?

I'm currently working on developing a directory-style application, and I am using iframes to embed other websites into the app. I would like the embedded site links to open within the parent window. In the Progressive Web App version, everything is w ...

androidhtmlangularjswebprogressive

Ensuring that hover remains active despite mousedown in JavaScript, CSS, and HTML

It appears that in browser-javascript hover events are deactivated when the mouse button is pressed down, as demonstrated by the following example: (Please run the code snippet to witness what I am referring to.) * { user-select: none; } #click, #drag, ...

javascripthtmlcsshover

Ensuring the width of a div matches the adjacent containers

I need assistance in creating a form that adjusts its width based on the form fields. The form contains both explanatory text and input fields, each enclosed in a div with inline-block set. The outer div (also using inline-block) should not expand beyond ...

htmlcss

How can TailwindCSS be used to wrap a nested flexbox at a specific viewport?

Utilizing TailwindCSS, I have the following code snippet: <div class="box-border flex w-auto flex-row gap-2 rounded-2xl border p-4 my-4 mx-4"> <div class="grow-0"> <div class="flex h-full flex-col items-center ...

htmlcssflexboxtailwind-css

What is the best way to iterate over an array in PHP and display each element within an <li> HTML tag?

I need help with a PHP script to iterate through an array and store the items in a <li> tag. I am struggling to get the names to display properly. The count of array items is showing up, but not the names themselves. <ul> <?php ...

phphtmlarraysfor-loop

Challenges with the height of the calendar component in Vuetify

I need assistance with preventing the appearance of two scroll bars while working with Vuetify's sheet and calendar components. https://i.stack.imgur.com/yBfhj.png Below is my code snippet: <template> <v-app> <v-main> & ...

cssvue.jsvuetify.jsheight

Is there a way to store a SAFEARRAY (an array of bytes) into an HTML hidden field?

Is there a way to extract an array of bytes from an active-x component, save it in an html-form input hidden field, and then send it to the server using form-submit? I'm not sure how to accomplish this. MIDL: HRESULT Data([out, retval] SAFEARRAY(VAR ...

javascriptc++htmlcomatl

Data not being displayed in dynamic <table>

Need help creating a dynamic table that displays data inserted in a specific format. {headers: ["header1", "header2"], rows: [["data1", "data2"], ["moredata", "wowoso muchdata"]]} The 'rows' consists of arrays where each array represents a row ...

htmlreactjsjsx

The DOMException occurred when attempting to run the 'querySelector' function on the 'Document' object

Currently, I am engaged in a project that was initiated with bootstrap version 4.3.1. I have a keen interest in both JavaScript and HTML coding. <a class="dropdown-item" href="{{ route('user.panel') }}"> User panel </a& ...

javascripthtmlcssbootstrap-4laravel-5.8

When the mouse hovers over the text inside a div, the link does not work in Internet Explorer

Here is some code for demonstration. I'm facing an issue where the link spans over the entire div, which works perfectly in Firefox. However, in IE, when I hover over the text, the cursor changes to a text cursor and the link doesn't work there. ...

htmlcssinternet-explorer

"Maximizing the power of Jquery's .each function. What

In my jQuery code, I have the following: function lshow() { var delayt = 500; var showtime = 5000; var ArrayOfElements = ['.slogan1','.whatwedo','.ekon','.ene', '.ekol', '.sm&a ...

jqueryhtmlqueueeach

Ways to detect the use of vue.js on a webpage without relying on vue-devtools

One way to determine if the page is utilizing Angular or AngularJS is by inspecting window.ng and window.angular. Is there a similar method to identify whether Vue is being used on the page directly from the console, without relying on vue-devtools? ...

javascripthtmlvue.js

Is it possible to stack images on top of each other on a webpage?

I'm looking to create a dress-up game website where users can click on different accessories to layer them on top of each other. It's a bit tricky to explain, but I've found some examples that demonstrate what I have in mind: This site is ...

jqueryhtmlcssflashimage

Display all information associated with the class that matches the clicked ID

Can anyone help me with a Jquery question? I am trying to display all data with the same class when I click on it. I have created a list of clickable items. When I click on an item, the corresponding data should be shown. However, the code I wrote is not ...

javascriptjqueryhtml

Aligning items vertically within a container with a constant height

I'm currently working on a website that requires a pixel-based navbar with a height of 80px. The issue I'm facing is the difficulty in vertically centering the ul and li elements. I have experimented with various methods such as using top:50%; ...

htmlcssflexboxcss-position

Set tab navigation widget with a fixed height

I am struggling with setting a fixed height for my tabs widget so that when I add more content, it will display a scrollbar instead of expanding endlessly. I have checked the CSS and JS files but cannot figure it out. It is important for me to contain this ...

javascriptjqueryhtmlcssjquery-ui

Utilize SVGs efficiently by loading them once and reusing them

Is it possible to use the same SVG element twice on a web page without having to load it again? I am changing the CSS of the SVG using JavaScript, so I believe the SVG must be directly embedded in the HTML rather than included as an object. Both instance ...

javascripthtmlcsssvg