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

Instructions for utilizing the nav-pill with nav-justified components in Bootstrap3x without incorporating any responsive capabilities

I'm eager to incorporate this into my project : <div class="container"> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">Home</a></li> <li><a href="#"> ...

jqueryhtmlcsstwitter-bootstrap-3

The function insertAdjacentHTML does not seem to be functioning properly when used with a

I am working with a parent element that contains some child elements. I create a DocumentFragment and clone certain nodes, adding them to the fragment. Then, I attempt to insert the fragment into the DOM using the insertAdjacentHTML method. Here is an ex ...

javascripthtmlcss

Items on Bootstrap have been expanded to fit larger screens

I'm currently working on a webpage () and facing an issue with the size of objects on a specific screen resolution. When users click on items in the accordions, multiple information cards are displayed. However, on larger screens, these cards appear ...

htmlcsstwitter-bootstrap

When the 'Show More' button is clicked, one Div will smoothly slide over another Div

I've been struggling for hours to find a way to make one DIV slide over another DIV below it instead of pushing it down. The setup is quite straightforward. I have a script that reveals more text when the 'Show More' button is clicked. Desp ...

javascriptjqueryhtmlcss

Design a dynamic top navigation bar in Angular or any other framework that automatically adjusts to the size of the screen, similar to the responsive bookmarks bar in

Could you offer guidance or suggestions on how to design a navigation bar (using Angular 1, jQuery, CSS, etc) that emulates the functionality of Google Chrome bookmarks bar when resizing the page? Essentially, as the page size decreases, a new button/symbo ...

javascriptjqueryhtmlcssangularjs

Using CSS to add color to the border of a shape

Is there a way to make only the top, shaped part of this polygon have a 2px blue outline? .graph { clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%); border:none; height:200px; width:100%; ...

htmlcss

multiple divisions in the center

I am struggling with centering 2 divs, each containing 3 nested divs wrapped around a big main div. The code I have written is as follows: <div stye="margin-left:auto; margin-right:auto; width: 1210px;"> <div id="left" style=" float:left; width ...

csshtml

React js background image not filling the entire screen

Having experience with React Native, I decided to give ReactJS a try. However, I'm struggling with styling my components because CSS is not my strong suit. To build a small web application, I am using the Ant Design UI framework. Currently, I have a ...

javascriptcssreactjs

How can CSS be used to center multi-line text with the shortest line appearing at the top

I'm currently working on some html and css code that looks like this: <div style="width: 40em; text-align: center;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard du ...

htmlcsstextalignment

Embedding a video element results in an unexpected increase in height

When I insert an HTML5-Video element into a div, it results in the wrapper having a height larger than the video itself. The wrapper is 7px taller than the actual video source, without any min-height set. Check it out! (Scroll down to the Video) The vide ...

htmlcsshtml5-video

Currently seeking assistance in replacing an existing Wordpress object with a new one

I'm looking to swap out the current slider image with a new slider. Whenever I try to replace it with the TOP 5 Games, they disappear or don't show up at all. <?php if( function_exists('cyclone_slider') ) cyclone_slider('24&ap ...

phpjqueryhtmlcsswordpress

Ways to prevent a <a href> element with a class linked to javascript from behaving like a block element

I am currently facing an issue with formatting an inline navigation. The last link, which is associated with a JavaScript class, is causing the entire link to become a block element instead of aligning inline with the rest of the links in the navigation. ...

javascripthtmlcss

Minimize ring size through mesmerizing smoke effects

I came across this stunning ring with a captivating smoke animation, but I am struggling to comprehend its design fully. My goal is to resize the ring to about 80px and maintain only a single color throughout. However, my attempts to simply reduce the siz ...

htmlcss

Navigate through an overflowing element in react/next

I have a component with a fixed width and overflow-x-auto. I want to hide the scroll bar and replace it with arrow buttons for scrolling left and right. How can I add this functionality to my component? Here is the code for my component: <div className ...

javascriptcssreactjsnext.jstailwind-css

Move the Material UI popover to the clicked icon's position

I am looking to create a popover similar to the image linked below. When the icon is clicked, I want the popover to display with the same user interface. Here is the code snippet that I have been using: {showPopOver && ( <Popover ...

cssreactjsmaterial-uipopover

Is it possible to display a Processing message at the beginning of a datatables table already containing data?

Within my Laravel 5.7 application, I have implemented the "yajra/laravel-datatables-oracle": "~8.0" library and found a helpful thread on customizing the processing message at this link. I adjusted the processing message styling as follows: .dataTables_pr ...

javascriptjqueryhtmlcssdatatables

What are the steps for positioning material-ui icons to the right?

I have a list that is dynamically generated with the following code snippet: <list className = "todos-list"> {allTodos.map((todo, index)=> { return ( ...

cssreactjsexpressmaterial-uiweb-development-server

How to set a background image using JQuery Mobile

Struggling to apply a background image on my webpage due to JQuery Mobile CSS taking precedence over my own styling. Despite attempting the following solution, it remains unsuccessful. body { height: 100%; background-image: url('ProjectImages/log ...

jqueryhtmlcssmobile

How to vertically align the elements within a DIV in jQuery Mobile

Is there a way to vertically align the content of a jQuery grid's block so that it is centered with another element in the same row? <div class="ui-grid-a" style="border:1px solid"> <div class="ui-block-a" style="vertical-align:middle" >& ...

jqueryhtmlcssjquery-mobile

CSS - Revealing an element on the backface post flip animation

I encountered an issue while working on a CSS flip card project. Despite using backface-visibility: hidden;, one element remains visible from the other side. In the simplified snippet provided, if you click on more in the bottom right corner, the card fli ...

css