Depending if it’s a negative margin on the top or bottom, it’ll behave differently if you apply a negative margin to the left and right and they work differently on floated elements. The negative margin here is imperative for this to work. The good news is the structure doesn’t change a bit.įor the image-stack parent element we’ll add a clearfix since we’re floating its child elements and need the content to render below: My friend and manager Jake Fentress came up with this solution which I applied to a recent client project since we needed to support IE11. This method does require the ole “take the the dang element out of the document flow” tactic and we’ll be doing it with floats! So in the case that you have to support IE. If you want to learn more about CSS grid I encourage you to familiarize yourself with the fantastic articles and videos from Rachel Andrews and Jen Simmons. You name it, the web is your oyster! Wee!
Text on image css responsive code#
Overlapping-images-css-grid-example by Bri Camp ( CodePen.Įt voila! With CSS grid and very little code you can start overlapping all the things that includes text over images, text over text (oh my!), images over canvas. Grid-row: 1 // make this image be on the same row The top image will always be a little pushed down from the top and will align with the left edge of the container.(Something to take into account when clients could upload any image via a CMS) The component will work regardless of any height of either top or bottom image.One of my ding dang favorite things about CSS Grid (besides the fr unit, or the min-max property) is the ability to overlap images by varying z-indices without taking a thing out of the normal document flow! First we’re going to analyze this component:
Text on image css responsive how to#
Method 1: CSS Gridīefore I start hearing grumbles about needing to support IE and how you can’t use CSS Grid, I say you can use CSS Grid and easily use a fall back for IE which I’ll show you how to do in the last section of this post. I will write out two solid approaches to overlapping images without having content overlap our wonderful image component I’ll affectionately call the “image stack”. The good news: there is a much better way and do not attempt that first route unless you enjoy pain. Image-stack-bad-example by Bri Camp ( CodePen. It’s a dark place, I don’t recommend it.Īn example of what I’m talking about is here: The next thing you know, you’re found days later with no food or water drinking the last of your uncontrollable tears.
To get around this, you might begin to try out arbitrary heights on the images and the component then becomes very fragile, limited, and hacky real fast. This is due to the height of the absolute-positioned image which is not recognized since it’s out of the document flow, (a normal behavior for an absolute positioned element). If the absolute-positioned element is taller than the static (top) image, the following content will overlap the images.
Wellllll, once you need text or any other content after the images, you’ll run into a problem. One way you might approach it is you could absolutely position one element with a lower z-index to make the other image sit on top, adjust the widths on each image, so you can see both of them and call it day, right? When the design is handed to you, as the developer to implement it, there are a few ways to go about it like most things with CSS. Something very popular in web design currently is overlapping images.
0 kommentar(er)
