I am trying to overlay an image using a pseudo-element that is aligned to the bottom of a parent element. Then parent then hides part of both the image and the pseudo element using overflow: hidden. This should make the parent clip both the image and the pseudo element at the same place. However the image extends beyond the pseudo element by 1px. This happens in both Chrome and IE at specific breakpoints.
I inserted the code to stackoverflow but I can not reproduce using their code viewer. I can however reproduce on codepen using a screen width of 800px:
https://codepen.io/dwigt/pen/PXyrXq
.wrapper {
margin: auto;
}
.item {
background: lightgrey;
max-height: 500px;
min-height: 500px;
height: 100%;
max-width: 800px;
}
.image {
overflow: hidden;
max-height: 250px;
position: relative;
}
.image img {
max-height: 100%;
width: 100%;
position: relative;
}
.image::after {
z-index: 10;
content: "";
position: absolute;
left: -50%;
top: calc(80%);
width: 200%;
height: 200%;
display: block;
background: lightgrey;
border-radius: 100%;
}
<div class="wrapper">
<div class="item">
<div class="image">
<img src="https://images.unsplash.com/photo-1547039963-8bebea5ff026?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1933&q=80"/>
</div>
<div class="text">
Lorem Ipsum
</div>
</div>
</div>
Related
Is it possible to make an element with position: absolute; have the full height of its parent, including overflowed content?
In the following code snippet the .line element gets cut off when scrolling the .container:
.container {
position: relative;
height: 150px;
width: 300px;
overflow-y: scroll;
}
.line {
position: absolute;
background: #000;
width: 2px;
left: 50%;
height: 100%;
}
<div class="container">
<div class="line"></div>
<div style="height: 500px;"></div>
</div>
Adding another wrapper can solve the issue:
.container {
height: 150px;
width: 300px;
overflow-y: scroll;
}
.container > div {
position: relative;
}
.line {
position: absolute;
background: #000;
width: 2px;
left: 50%;
height: 100%;
}
<div class="container">
<div>
<div class="line"></div>
<div style="height: 500px;"></div>
</div>
</div>
The height: 100%; of the absolutely positioned element refers to the given CSS heigth (i.e. the height defined in the CSS rule) of the relative parent, not to its stretched "real height" when it overflows. So it will always have the initial parent height which is defined via CSS.
To achieve what you want, you'd have to get the parent height via javascript and apply it to the child.
I'm using Swipe.js to create a page with several screens. Swipe requires a structure of 3 nested divs, with some style defined. I want to position an element 70% towards the bottom of one of the screens, but I'm finding that its Y position remains at the top when defined as a percentage. My guess is that the height of the containing div is somehow still 0, though I have set all min-height properties to 100%.
I'm testing on Chrome in desktop, for now. My stylesheet:
/* required by swipe.js */
.swipe {
overflow: hidden;
position: relative;
min-height: 100%; /* added this everywhere I could just in case */
}
.swipe-wrap {
overflow: hidden;
position: relative;
min-height: 100%;
}
.swipe-wrap > div {
float: left;
width: 100%;
min-height: 100%;
position: relative;
}
.page {
min-height: 100%;
}
html,body {
height: 100%;
margin: 0px;
padding: 0px;
}
/* element I want to position */
.myElement {
position: relative;
width: 200px;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}
Body:
<div id="slider" class="swipe">
<div class="swipe-wrap">
<div class="page">
<div class="myElement">
<h1>I should be more than halfway down.</h1>
</div>
</div>
</div>
</div>
The result is that the inner div is centred horizontally, but vertically it's at the top (in fact, cut off because of the transform offset).
I have tried using flex and align-items: center. That does work. I'm not sure if I can use flex to define arbitrary relative positions, though.
Please check below example
.swipe {
overflow: hidden;
position: relative;
height: 100%;
}
.swipe-wrap {
overflow: hidden;
position: relative;
height: 100%;
}
.swipe-wrap > .page {
display: table;
width: 100%;
height: 100%;
table-layout: fixed;
text-align: center;
}
.myElement{
display: table-cell;
vertical-align: middle;
}
.page {
min-height: 100%;
}
html,body {
height: 100%;
margin: 0px;
padding: 0px;
}
<div id="slider" class="swipe">
<div class="swipe-wrap">
<div class="page">
<div class="myElement">
<h1>I should be more than halfway down.</h1>
</div>
</div>
</div>
</div>
I am trying to build a carousel that has a typical slide animation from one slide to the next. However each slide has an image in it that is going to much wider than the slide width and the image will pan animate before the carousel changes to the next slide. So the order is slide > pan image > next slide > pan image, and so on. The image requires some unusual complexity in that it must have a footer that is blurred. The only way I found to do this can be seen in the following codpen:
http://codepen.io/aaronbalthaser/pen/XKmQrG
Notice I set the body to flex and centered the elements for dev purposes. Next I created the elements that would be the actual carousel and I added the above codpen as child elements. Everything looks great which can be seen in the next codepen:
http://codepen.io/aaronbalthaser/pen/WxQWbM
The problem is the flex properties added to the body tag were only for development. Once I remove those properties the image disappears. That can be seen by deleting those properties in the second codepen. Additionally, once you delete those properties you can remove the fixed property found in the background shorthand and it appears again. But this property is needed to get the blurred effect the work. Ideally I need the following code to work.
HTML markup:
<div class="add-size">
<div class="carousel">
<div class="item">
<div class="pan">
<div class="container"> <!-- animation element -->
<div class="inner">
<div class="image"></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="pan">
<div class="container"> <!-- animation element -->
<div class="inner">
<div class="image"></div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.add-size {
width: 300px;
height: 250px;
border: 1px solid red;
position: relative;
overflow: hidden;
}
.carousel {
width: 600px;
height: 250px;
display: block;
position: absolute;
}
.item,
.pan {
width: 300px;
height: 250px;
display: block;
float: left;
overflow: hidden;
position: relative;
}
.container {
width: 400px;
height: 300px;
position: absolute;
bottom: 0;
}
.inner {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.image {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;
background-size: fill;
}
.image:before {
left: -5%;
right: -5%;
bottom: -5%;
content: "text";
position: absolute;
height: 26%;
width: 110%;
background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;
background-size: fill;
-webkit-filter: blur(8px);
filter: blur(8px);
}
Any assistance would be awesome. Thanks.
Using the fixed background-attachment property set to fixed, sets it against the viewport's position. You shouldn't use fixed. Drop it and just use background-size: cover instead of fill.
.image {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi);
background-size: cover;
}
I have two images of different width and height that need to be positioned bottom centered within the image box. Here is the HTML and CSS example.
<div class="box">
<div class='image'>
<img alt="" src="image.jpg"/>
</div>
</div>
.box {
max-width: 970px;
height: 440px;
}
.box img {
max-width: 100%;
position: absolute;
bottom: 8px;
margin-left: auto;
margin-right: auto;
}
This code works fine for a large image of exact width and height. But when a smaller image is placed within image box, that image is centered bottom right. How can I make both images center bottom?
Thanks for anyone's help!
Here you go... I'll try to explain as we go, but short answer, a fiddle
.box {
/* Just so I could see the parent */
background-color: #bada55;
max-width: 970px;
height: 440px;
/* Needed to make this element positional (so it will contain the absolutely positioned child */
position: relative;
/* Yep, center wasn't necessary here... */
}
.box .image { /* move this to the image wrapper */
position: absolute;
bottom: 8px;
/* Force full width */
left: 0;
right: 0;
/* Center contents (the image) */
text-align: center;
}
img {
max-width: 100%;
}
I found this semantic trick to work pretty well (without any absolute positions)
.box {
margin: 0;
text-align: center;
max-width: 970px;
height: 440px;
border:2px solid red;
}
.box .something-semantic {
display: table;
width: 100%;
height: 100%;
}
.box .something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: bottom;
}
html
<div class="box">
<div class="something-semantic">
<div class="something-else-semantic">
<img src="" width="50" height="40"/>
<img src="" width="120" height="70"/>
</div>
</div>
</div>
fiddle here.
I'm trying to center a wide div inside a smaller one, and center it. Can this be done?
I've got this:
HTML
<body>
<div id="full_container">
<div id="machine_mask">
<div id="machine_container">
<!---- SOME CONTENT HERE --->
</div>
</div>
<div class="machine_footer">
<img src="sprites/base_maquina.png" alt="panel de control" />
</div>
</div>
</body>
CSS
body {
margin :0;
}
div#full_container {
width: 100%;
height: 100%;
background: #805080;
}
div#machine_mask {
margin-top: 30px;
width: 100%;
display: inline-block;
height: 600px;
background: #805080;
position: relative;
overflow: hidden;
}
div#machine_container {
width: 1230px;
height: 500px;
background: #805080;
position: relative;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
When the window is wider than 1230px, it centers, but I really need for it to be centered when the window is smaller...
Is there a way to do this? (I was thinking about using jQuery and repositioning it, but I'd really prefer to do this in css)
Thank you very much!
You could use the absolute positioning hack.
div#machine_container {
width: 1230px;
height: 500px;
background: #805080;
position: absolute;
left: 50%;
margin-left: -615px; //half of 1230px
overflow: hidden;
}