Dynamic div positioned over image

Is there a way to create a responsive div on top of a responsive image?

I'm having trouble getting the div to fully align with the image in my code. Can anyone offer assistance?

Check out the codePen here

HTML Code:

<div class="container-fluid first">
      <div class="row tab-pane Galeria">
        <div class="col-sm-2">
          <a class="d-block mb-4 h-100">
            <img class="Images img-fluid" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt="">
            <div class="ImageText"> Name</div>
          </a>
        </div>
        <div class="col-sm-2">
          <a class="d-block mb-4 h-100">
            <img class="Images img-fluid" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt="">
            <div class="ImageText"> Name</div>         
          </a>
        </div>
        <div class="col-sm-2">
          <a class="d-block mb-4 h-100">
            <img class="Images img-fluid" src="https://source.unsplash.com/EUfxH-pze7s/400x300" alt="">
            <div class="ImageText"> Name</div>
          </a>
        </div>
    </div>

htmlcsstwitter-bootstrap

Answer №1

We have made some minor modifications to the code in HTML and CSS, as well as added some Bootstrap classes to improve the layout of the elements. We hope this version works better for you.

.Galeria{
margin-top: 20px;
}
.image-item{
margin-bottom:20px;
}
.Images{
border-radius: .25rem;
width: 100%;
height: auto;
border-radius: 8px;
cursor: pointer;
}

.image-block{
position:relative;
}
.ImageText{
width: calc(100% - 20px);
height: auto;
background: #F0EDEB 0% 0% no-repeat padding-box;
border-radius: 8px 8px 0px 0px;
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(50px);
position: absolute;
bottom: 0;
left: 10px;
padding: 10px;
box-sizing: border-box;
font-size: 16px;
font-family: "Segoe UI";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid first">
<div class="row tab-pane Galeria">
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="image-item">
<a class="d-block image-block h-100">
<img class="Images img-fluid" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt="">
<div class="ImageText"> Name</div>
</a>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="image-item">
<a class="d-block image-block h-100">
<img class="Images img-fluid" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt="">
<div class="ImageText"> Name</div> 
</a>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="image-item">
<a class="d-block image-block h-100">
<img class="Images img-fluid" src="https://source.unsplash.com/EUfxH-pze7s/400x300" alt="">
<div class="ImageText"> Name</div>
</a>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="image-item">
<a class="d-block image-block h-100">
<img class="Images img-fluid" src="https://source.unsplash.com/M185_qYH8vg/400x300" alt="">
<div class="ImageText"> Name</div>
</a>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="image-item">
<a class="d-block image-block h-100">
<img class="Images img-fluid" src="https://source.unsplash.com/sesveuG_rNo/400x300" alt="">
<div class="ImageText"> Name</div>
</a>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="image-item">
<a class="d-block image-block h-100">
<img class="Images img-fluid" src="https://source.unsplash.com/AvhMzHwiE_0/400x300" alt="">
<div class="ImageText"> Name</div>
</a>
</div>
</div>
</div>
</div>

Answer №2

Perhaps consider using a div element with the image set as a background instead of an img tag.

Here is an example:

<div class="Images" style="background: url(https://source.unsplash.com/aob0ukAYfuI/400x300)">
   <div class="ImageText"> Name</div>
</div>

.Images {
   position: relative;
   background-size: cover !important;
   width: 90%; 
   height: 100%; 
   border-radius: 10px;
}
.ImageText {
   ...
   width: calc(100% - 46px) !important;
}

Answer №3

To apply custom styles to your gallery, the following CSS can be used:

.Galeria a {
 position: relative;
}

.ImageText {
 left: 0;
 width: 100%;
 box-sizing: border-box;
}

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

The CSS Validator does not recognize the CSS pointer-events and appearance properties

I'm a CSS beginner who recently created an app. I've encountered some errors and warnings when validating my CSS code: https://i.stack.imgur.com/g4MUz.png https://i.stack.imgur.com/Es1DE.png Could someone kindly explain these errors and warnin ...

cssw3c-validation

Remove a div element with Javascript when a button is clicked

I am working on a project where I need to dynamically add and remove divs from a webpage. These divs contain inner divs, and while the functionality to add new divs is working fine for me, I'm facing some issues with removing them. The code snippet b ...

javascriptjqueryhtmlcssdynamic

Unable to eliminate border from image within label

The following code generates a border that appears to be approximately 1px thick and solid, colored grey around the image. Despite setting the border of the image to none, the border still remains. Here is the code snippet: <label> <img styl ...

htmlcss

Concealing inactive select choices on Internet Explorer versions greater than 11 with the help of AngularJS

I am having trouble hiding the disabled options in AngularJS specifically for IE. Check out this fiddle for a better idea: https://jsfiddle.net/s723gqo1/1/ While I have CSS code that works for hiding disabled options in Chrome/Firefox, it doesn't see ...

htmlcssangularjsselectdrop-down-menu

Spacing Issue with Material UI Gap Placement

Currently, I am implementing Material UI 5 within a React project using the following code snippet: <Stack> <Stack flexDirection="row" justifyContent="center" padding={4} spacing={{ xs: 4 }} ...

cssreactjsmaterial-uiflexboxalignment

How to create a stunning pixel pattern overlay on a website section

I've been exploring how to add a pixel pattern overlay onto a website section similar to what's done on this site: (over the background video image at the top and the image in the bottom section). I'm sure it's a simple process, I jus ...

csswordpress

"Bootstrap is functioning properly on my local environment, but it seems to

Utilizing the MVC framework and bootstrap has been successful for optimizing my website locally. However, when I upload it to the server, none of the CSS is being rendered. Additionally, the front page, meant to be a carousel slider, appears as a vertical ...

javascriptjquerycssasp.net-mvctwitter-bootstrap

Position the center of an Angular Material icon in the center

Seeking help to perfectly center an Angular Material icon inside a rectangular shape. Take a look at the image provided for reference. The current positioning appears centered, but upon closer inspection, it seems slightly off-center. It appears that the ...

cssangulartypescriptangular-materialangular8

I am interested in swapping out the text links in a menu for images

Looking to swap out text links in a menu for images, but stuck with template constraints generated by rapidweaver. The HTML template can't be modified, except for the link text itself. For example: <a href="http://truehealth.gr/eng/" rel="">!UK ...

javascriptjquerycss

Fluid Bootstrap Container for x-small and small screens

Is it possible to have the outer-most div container named "container" for md and lg, while using container-fluid for xs and sm without any additional CSS? Any suggestions on achieving this natively? Appreciate your help. ...

twitter-bootstrapbootstrap-4

The background image is being cropped outside the item. What steps should I take to display it properly?

I am facing an issue with positioning a background image just outside the lime container. When I position it correctly, any part of the image that extends beyond the container gets cut off. How can I display the whole image even if it is outside the conta ...

csshtml-listsbackground-image

The presence of parentheses in a JQuery selector

My database contains divs with ids that sometimes have parentheses in them. This is causing issues with my JQuery selector. How can I resolve this problem? Let me provide an example to illustrate: https://jsfiddle.net/2uL7s3ts/1/ var element = 'hel ...

javascriptjqueryhtml

Unable to set the correct title view for mobile devices

We have successfully styled the products for desktop view and larger phones, but we are facing challenges in adjusting them properly for smaller phones. Below you will find a photo and corresponding code snippets: /* Products list - view list */ .product ...

css

Utilizing HTML form action to link to a PHP script located in a separate folder

My journey begins here Main: Members/name.html search.php Members is a directory containing my html code in name.html <form action="../search.php" method="get"> <div> &l ...

phphtml

What could be causing my website to have a horizontal scroll even when the width is set to 100%?

My website seems to be scrolling horizontally, possibly due to an issue with the footer. I suspect it might be related to the social media icons in the footer, but I'm not entirely sure. Any guidance on resolving this problem would be greatly apprecia ...

htmlcss

Using jQuery Ajax to Retrieve Inner Text from Elements

Looking for a solution with PHP file output like this: <div id="title">Add Us On Myspace!</div><img id="image" src="http://i39.tinypic.com/67jybs.png" alt="Add Us On Myspace!" /> The code to retrieve and display this is as follows... $ ...

jqueryhtmlajaxcss-selectors

Getting the value of a variable within the scope of AngularJS can be achieved by utilizing

I have an ng-repeat directive in my code that displays slides. Here is a snippet of the data: slides = [{ src: "/sikiosk/slidedata/Global/NA/USNS/Cafeteria/5000_24.jpg", interval: 5000 }, { src: "/sikiosk/slidedata/Global/NA/USNS/Cafeteria/5000_login-regi ...

javascripthtmlangularjsangularjs-ng-repeat

Achieving equal height for the englobing/parent div and the inner divs

To achieve a standard left, middle, and right column layout, it is necessary for me to enclose various inner divs of different heights within a surrounding/parent div. It is crucial that the parent div adjusts its height to match the tallest inner div, whi ...

csshtml

Upgrade the arrow accordion in bootstrap by incorporating images instead

I have implemented a Bootstrap accordion with a toggle arrow. Here is an example: http://jsfiddle.net/zessx/r6eaw/12/ My question is, if I want to change the arrow with an image, what do I need to edit? Or how can I implement it? This is the image I want ...

javascriptjqueryhtmlcsstwitter-bootstrap

Fill various dropdowns with a list or array of values discreetly without displaying the populated values on the visible interface

I have an array with values 1,2,3,4. Using an add function, I am able to create multiple dropdowns. By default, the first dropdown always has a value of one when initially set up. When we press add and populate the second dropdown with values 2,3,4, tho ...

javascripthtmlarraysangularjsdata-structures