Raise the image above the wrapping div, positioning it at the very bottom

I'm struggling to position an image within a div in a way where:

  1. it protrudes above the div
  2. it begins at the very bottom of the div (with a small gap that I can't eliminate)

Below is the relevant HTML code snippet:

 <div class="teaser-image-wrapper">
   <div class="wrap">
    <img class="image2 more-height" src="images/svg/creativeyou.svg" alt="Creative You! Title Image">
   </div>
 </div>

And here is my CSS:

.teaser-image-wrapper {
    background-color: #83ffcd;
    width: 100% !important;
    margin: 
}

.wrap {
    width: 80%;
}

.teaser-image-wrapper img {
    padding: 0 !important;
    object-fit: contain;
    max-height: 75vh;
    max-width: 100%;
    line-height: 0;
}

For reference, the greenish background of the wrapper (.teaser-image-wrapper) should be positioned lower than the image (svg) so that it sticks out at the top. Additionally, please note the small gap at the bottom.

https://i.stack.imgur.com/jzz0l.png

Any assistance or guidance on this matter would be greatly appreciated. Thank you!

cssimage

Answer №1

To create a similar effect, consider using a combination of position absolute and relative. Try setting the wrap class to relative and the image to absolute with: 

left:0;
right:0;
bottom:0;
Then adjust the 'top' position and set a height for the wrap class to achieve the desired look. There may be other methods to accomplish this, but this is one option to start experimenting with. I hope this suggestion helps!

Answer №2

Success! After some experimentation, I was able to resolve the issue.

My goal was to achieve the following effect:

https://i.stack.imgur.com/PZT4z.png

The solution involved adjusting the CSS to move the wrapper down while pulling the image up.

.teaser-image-wrapper {
    max-width: 80%;
    margin: 40vh 10% 0;
    padding: 0;
    line-height: 0;
}

.wrap {
    width: 100%;
    background-color: #83ffcd;
    height: 50vh;
    margin-top: 25vh;
}


.teaser-image-wrapper img {
    padding: 0 !important;
    object-fit: cover;
    height: 75vh;
    width: 100%;
    line-height: 0;
    position: relative;
    margin-top: -25vh;
}

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

Achieving consistent height for Bootstrap5 columns: A simple guide

I'm currently utilizing Bootstrap5 and I am interested in adjusting the height of these two columns to be similar. Is there a way to achieve this? Below is the code snippet: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email ...

htmlcssheight

CSS transitions do not function properly in Mozilla browsers

I have been attempting to create a hover animation transition on my website. It seems to work fine in Opera and Chrome, but not in Mozilla Firefox. Can anyone provide guidance on how to fix this issue? Here is the code I am currently using: HTML <a hr ...

htmlcssmozilla

Styling limitations encountered when using lang="scss" with scoped css

My current project involves using Quasar and I am attempting to style the first column of q-table: <style lang="scss" scoped> td:first-child { background-color: #747480 !important; } </style> Unfortunately, this code does not seem to have a ...

cssvue.jsvuejs2quasar-framework

Creating a flexible Tic Tac Toe board using only HTML and CSS without any JavaScript

I'm currently tackling an HTML layout challenge that involves creating a responsive Tic Tac Toe board using only HTML and CSS, without any JavaScript. This is how I have structured the layout of the board: <div class="board"> <div class= ...

htmlcss

What is the best way to apply an animation class to a modal upon clicking a button?

When I click the "x" button on the modal, I want the animation to occur. However, what currently happens is that the modal closes without the animation. Then, upon reopening the modal, the animation occurs without any clicking involved. Below is my curren ...

javascripthtmlcssbootstrap-5

Is it better to store CSS and JavaScript in separate files or within the main HTML document

While the best practice is to place JavaScript and CSS code in separate files (such as .js and .css), many popular websites like Amazon, Facebook, etc. often include a large portion of their JavaScript and CSS code directly within the main HTML page. Whic ...

javascripthtmlcssweb

Issue with alignment in the multiselect filter of a React data grid

In React Data Grid, there is a issue where selecting multiple filter options messes up the column headers. Is there a solution to display selected filter options above a line in a dropdown rather than adding them to the column header? The column header siz ...

javascriptcssreactjsreact-data-grid

The title in my div class doesn't seem to be properly centered, even though I have set the margin to auto. What steps can I take to correct this issue?

My div is set to have a margin:auto, but the h1 inside is not centered as expected. I've tried various solutions, but none seem to work. Can someone please help me get it centered properly? body { background: #5D6D7E; color: wh ...

htmlcsswebmargin

container that fades away, while the popup remains visible

Is it possible to fade the background of a container without affecting the pop-up form inside? I've come across some solutions, but they all seem to treat them separately. Here's what I'm trying to achieve: <div class='wrapper ...

jqueryhtmlcss

What type of Javascript is required for a photo carousel that displays random images from a designated folder?

I have a minor issue that has been keeping me up at night. I can't seem to shake it off and find the right solution! Currently, I am working with Bootstrap 4 as my Framework. My task is to create a full-page Carousel that cycles through images random ...

javascriptcssrandomcarouselslideshow

Tips on adding space between a material icon and its corresponding description

I have a design that needs some adjustments. The material icon is too close to the description, and I attempted to create padding by adding the following CSS: .location-secondary-info span:first-child { padding-right: 5px; } However, this change did no ...

cssreactjssassgoogle-material-icons

The anchor tag causes the tooltip to display outside of the td element

One of my requirements is to display the click percentage for each link in an HTML template that is dynamically fetched from a database. I attempted to show the click percentage for each anchor link by adding them to the `data-title` attribute using jQuery ...

javascriptjqueryhtmlcss

Looking for some help with tweaking this script - it's so close to working perfectly! The images are supposed to show up while

Hey everyone, I'm struggling with a script issue! I currently have a gallery of images where the opacity is set to 0 in my CSS. I want these images to become visible when scrolling down (on view). In this script, I have specified that they should app ...

javascriptjquerycss

Fixed Positioning Div to Stay at the Top while Scrolling

Currently, I have successfully implemented the functionality to stick the div to the top once it scrolls down by 320px. However, I am curious if there is an alternative approach to achieving this effect. Below is the code snippet I am using: jQuery(functi ...

javascriptjquerycsshtml

A triangular-shaped div positioned at the bottom with a captivating background image

Is there a way to create a div with a unique twist - a triangle shape at the bottom? I've been attempting to add a background image within the triangle using a pseudo element (:after), but so far, it hasn't been successful. #homebg:after{ co ...

htmlcsssvgcss-shapes

The initial render of Next.js is not properly loading the CSS files

Encountering an issue with the initial load of the mobile app version; it seems that the CSS of my component covering the page is not loading correctly on the first screen load. However, when resizing to desktop and then switching back to mobile view, the ...

javascriptcssreactjsnext.jsmaterial-ui

Various Mobile Devices Display Website in Unique Ways

I've been having trouble getting my website to display consistently across different phones and could use some assistance. You can view the site at www.fpphotos.store. I have set overflow-x:auto; for the table containing the images, with CSS styles de ...

htmlcss

CSS-Only Menu Fails to Function with Image Overlayed on Top

I need help with a website I created where I want the header to be placed slightly on top of my CSS menu. However, when I overlay an image, I lose my CSS menu and I am looking for a way to keep it while still displaying the image. My goal is to have the C ...

htmlcss

Ways to make an area map more transparent

I'm encountering an issue with HTML opacity... Currently, I've implemented opacity using CSS but it's not functioning correctly. Below is my HTML and CSS code: <area shape ="rect" class="transbox" coords ="0,0,30,22" href ="test1.htm" ...

htmlcssopacity

What is the best way to add a custom class alongside cdk-overlay-pane for a material menu in Angular 7?

I have a specific requirement to create a mega menu using Angular Material Menu. I attempted to apply some custom styling to the cdk-overlay-pane using my own class, but it did not work as expected. I tried to add a custom class to the mat-menu element us ...

htmlcssangularangular-materialangular7