A horizontal scrolling container is what I'm creating. Everything is operating smoothly. The problem, though, is that I want to put a picture on top of each card. But rather than being on top of the wrapper, the picture goes within. What could be the best solution?
.scrolling-wrapper {
-webkit-overflow-scrolling: touch;
height: 300px;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
padding-inline: 40px;
position: relative;
}
.scrolling-wrapper::-webkit-scrollbar {
display: none;
}
.card {
display: inline-block;
height: 100%;
width: 300px;
background-color: red;
border-radius: 20px;
position: relative;
margin-right: 10px;
}
.our-member-owner-card-image {
position: absolute;
top: -70px;
z-index: 9999;
}
<div class="scrolling-wrapper">
<div class="card">
<div class="our-member-owner-card-image">
<img width="220px" src="https://images.unsplash.com/photo-1668767483967-cc2325edafbf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" />
</div>
</div>
<div class="card">
<div class="our-member-owner-card-image">
<img width="220px" src="https://images.unsplash.com/photo-1668767483967-cc2325edafbf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" />
</div>
</div>
</div>
Related
On my webpage there is an area and I'd like to add a image to it. I don't know the image's size and orientation (portrait or landscape). But I want it to fit the area as it is displayed in the picture:
So, if an image has a landscape orientation it must fill the whole width of the area. See picture 1. If the image's width is bigger that the area's width the image's width must be constrained and if its width is smaller - the image must be widened. However if the image's height is bigger than the area's one the image's height must be constrained. See picture 2.
The similar I want for the portrait image. See picture 2.
In short, what I want can be easily done with object-fit: contain;.
.wrapper {
width: 30%;
height: 400px;
overflow: hidden;
border: 1px solid black;
position: relative;
}
.img {
width: 100%;
height: 100%;
object-fit: contain;
}
.label {
position: absolute;
top: 0;
right: 0;
padding: 15px;
background-color: #cccccc;
}
<div class="wrapper">
<img class="img" src="https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="">
<span class="label">Label</span>
</div>
Here is the CodePen: see the code
But the problem is that I have a label to each picture and I want it to be on the top-right corner of the picture and not the area.
Is there any way to do this with CSS only?
Any help would appreciated! Thank you in advance!
instead of the object-fit: contain; replace it with background-size:cover in the img selector css file.
You can wrap the image with a div that has a display: inline-block rule, that will force the div to fit the image scale, then, in this div add another div for the label and position it with absolute.
.cont {
width: 300px;
height: 250px;
background-size: contain;
background-repeat: no-repeat;
margin: 20px;
border: 3px solid black;
display: flex;
align-items: center;
justify-content: center;
}
div .image-cont {
display: inline-block;
position: relative;
}
img {
max-width: 300px;
max-height: 250px;
width: auto;
height: auto;
}
.label {
background-color: yellow;
padding: 5px;
position: absolute;
top: 0;
right: 0;
}
<div class="cont">
<div class="image-cont">
<img src="https://image.shutterstock.com/image-photo/beautiful-abstract-grunge-decorative-navy-260nw-539880832.jpg" />
<div class="label">Label</div>
</div>
</div>
<div class="cont">
<div class="image-cont">
<img src="https://i.pinimg.com/originals/1b/30/80/1b30806bed30a7d071752948d00e75f8.jpg" />
<div class="label">Label</div>
</div>
</div>
You can do the following:
Wrap image and .label span with another span with class e.g. .inner-wrapper and add to its css
position: relative;
height: 100%;
Remove from .wrapper css position: relative; and add
display: flex;
justify-content: center;
Replace in .img css width: 100%;height: 100%; with max-width: 100%;max-height: 100%;
Look in the snippet in full page mode and resize the window.
.wrapper,
.wrapper200 {
width: 30%;
height: 400px;
overflow: hidden;
border: 1px solid black;
/*position: relative;*/
display: flex;
justify-content: center;
}
.wrapper200 {
height: 200px;
}
.inner-wrapper {
position: relative;
height: 100%;
}
.img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.label {
position: absolute;
top: 0;
right: 0;
padding: 15px;
background-color: #cccccc;
}
/* for visual illustration */
.container {
display: flex;
justify-content: space-evenly;
padding: 10px;
outline: dashed red 1px;
margin-bottom: 25px;
}
<h1>Heigth: 200px</h1>
<div class="container">
<div class="wrapper200">
<span class="inner-wrapper">
<img class="img" src="https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="">
<span class="label">Label</span>
</span>
</div>
<div class="wrapper200">
<span class="inner-wrapper">
<img class="img" src="https://images.unsplash.com/photo-1581622634376-ff17d073c4f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1832&q=80" alt="">
<span class="label">Label</span>
</span>
</div>
</div>
<h1>Heigth: 400px</h1>
<div class="container">
<div class="wrapper">
<span class="inner-wrapper">
<img class="img" src="https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="">
<span class="label">Label</span>
</span>
</div>
<div class="wrapper">
<span class="inner-wrapper">
<img class="img" src="https://images.unsplash.com/photo-1581622634376-ff17d073c4f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1832&q=80" alt="">
<span class="label">Label</span>
</span>
</div>
</div>
You should try to use background-image instead of a single image
.wrapper {
width: 30%;
height: 400px;
overflow: hidden;
border: 1px solid black;
position: relative;
}
.img {
width: 100%;
height: 100%;
object-fit: contain;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 10%;
}
.label {
position: absolute;
top: 0;
right: 0;
padding: 15px;
background-color: #cccccc;
}
<div class="wrapper">
<div class="img" style="background-image:url(https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80)" alt="">
<span class="label">Label</span>
</div>
</div>
I have a mini-gallery of images which I want to use to toggle content depending on the image clicked. When hovering on the image it scales up slightly. My problem is that when scaling I want to hide the overflow off the page but still show the overflow in the y-direction. I have tried overflow-x: hidden, overflow-y: visible but the y-overflow only appears at the bottom and scrollbars appear.
#images {
height: 70vh;
width: 100%;
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
overflow-y: visible;
}
#images .image {
width: 50%;
height: 35vh;
transition: 0.5s;
cursor: pointer;
z-index: 1;
}
#images .image:hover {
transform: scale(1.1);
z-index: 10;
}
#images .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div id="images">
<div class="image">
<img src="image.jpg">
</div>
<div class="image">
<img src="image.jpg">
</div>
<div class="image">
<img src="image.jpg">
</div>
<div class="image">
<img src="image.jpg">
</div>
</div>
Is there a way to make these act as it would with no overflow stated without a scrollbar appearing in the x direction?
You need to add scaling property to image instead of outer div.
#images {
height: 70vh;
width: 100%;
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
overflow-y: visible;
}
#images .image {
width: 49%;
height: 35vh;
transition: 0.5s;
cursor: pointer;
z-index: 1;
overflow: hidden;
position: relative;
border:1px solid #000;
}
#images .image:hover img {
transform: scale(1.1);
z-index: 10;
position: absolute;
left: 0;
transition: .2s;
}
#images .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div id="images">
<div class="image">
<img src="https://dummyimage.com/600x400/ffffff/000000">
</div>
<div class="image">
<img src="https://dummyimage.com/600x400/ffffff/000000">
</div>
<div class="image">
<img src="https://dummyimage.com/600x400/ffffff/000000">
</div>
<div class="image">
<img src="https://dummyimage.com/600x400/ffffff/000000">
</div>
</div>
Remove overflow css from the images and add it to the body:
body {
width: 100%;
overflow: hidden;
}
I'm building a customised horizontal carousel, where in I want to display some items which are vertically scroll-able.
Code I've tried so far:
html
<div class="carousel">
<div class="c-item">Item-1</div>
<!-- to be displayed vertically -->
<div class="abs">
<div class="a-item">Abs Item-1.1</div>
<div class="a-item">Abs Item-1.2</div>
<div class="a-item">Abs Item-1.3</div>
</div>
<div class="c-item margin">Item-2</div>
<!-- to be displayed vertically -->
<div class="abs">
<div class="a-item">Abs Item-2.1</div>
<div class="a-item">Abs Item-2.2</div>
<div class="a-item">Abs Item-2.3</div>
</div>
</div>
<div class="other">
Other div
</div>
css
.carousel{
color: #FFF;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
position: initial;
.c-item{
display: inline-block;
width: 35%;
background: #000;
height: 100px;
&.margin{
//margin-left: 35%;
}
}
.abs{
background: #444;
display: inline-block;
vertical-align: top;
width: 35%;
max-height: 180px;
overflow-y: auto;
.a-item{
height: 100px;
border: 1px solid #000;
}
}
}
.other{
background: yellow;
}
Result:
(codepen)
The problem here is: I want the other div to start just below the item-1; meaning that the vertically scrolled div should be overlapping the other div and the carousel height should be fixed at 100px. I tried using position: absolute for the .abs div but then that div doesn't move on scrolling the carousel.
Desired output will look like this:
A flexbox solution
Each item is 33.33% wide and 100px high. The items inside .multiple are also 100px high.
.multiple has position: relative and overflow-y: auto. The items inside have position: absolute.
Hint: Container -> position: relative, items inside -> position: absolute. That's how it works.
top: (100 * n)px for each <div> inside .item.multiple. n is the index of the <div> inside .item.multiple, starting with 0.
The HTML structure has been changed
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.carousel {
display: flex;
width: 100vw;
overflow-x: auto;
color: white;
}
.carousel>.item {
flex: 1 0 33.33%;
//margin-right: 5px;
}
.carousel>.item:nth-child(odd) {
background: black;
}
.carousel>.item:nth-child(even) {
background: darkgrey;
}
.carousel>.item,
.carousel>.item.multiple>div {
height: 100px;
}
.carousel>.item.multiple {
position: relative;
overflow-y: auto;
}
.carousel>.item.multiple>div {
position: absolute;
width: 100%;
}
.carousel>.item.multiple>div:nth-child(2) {
top: 100px;
}
.carousel>.item.multiple>div:nth-child(3) {
top: 200px;
}
/* And so on ...
.carousel>.item.multiple>div:nth-child(...) {}
*/
<div class="carousel">
<div class="item">
<div>Item-1</div>
</div>
<div class="item multiple">
<div>Item-1.1</div>
<div>Item-1.2</div>
<div>Item-1.3</div>
</div>
<div class="item">
<div>Item-2</div>
</div>
<div class="item multiple">
<div>Item-2.1</div>
<div>Item-2.2</div>
<div>Item-2.3</div>
</div>
</div>
<div class="other">
Other div
</div>
Your desired result mean making the child overlap the parent, and i don't think that's possible. BUT you can "hack" this by wrapping the .carousel with another div (.demo it this general example), so the results will be something like this:
.demo {overflow: visible; height: 100px;}
.carousel {
color: #FFF;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
position: initial;
}
.carousel .c-item {
display: inline-block;
width: 35%;
background: #000;
height: 100px;
}
.carousel .abs {
background: #444;
display: inline-block;
vertical-align: top;
width: 35%;
max-height: 180px;
overflow-y: auto;
}
.carousel .abs .a-item {
height: 100px;
border: 1px solid #000;
}
.other {
background: yellow;
height: 200px;
}
<div class="demo">
<div class="carousel">
<div class="c-item">Item-1</div>
<div class="abs">
<div class="a-item">Abs Item-1.1</div>
<div class="a-item">Abs Item-1.2</div>
<div class="a-item">Abs Item-1.3</div>
</div>
<div class="c-item margin">Item-2</div>
<div class="abs">
<div class="a-item">Abs Item-2.1</div>
<div class="a-item">Abs Item-2.2</div>
<div class="a-item">Abs Item-2.3</div>
</div>
</div>
</div>
<div class="other">
Other div
</div>
As you can see from the snippet the scroll-x doesn't show - yet it exist. You can click one of the .carousel item and scroll them right and left.
Since it's not obvious that the .carousel is scrolling, you can add extra buttons to scroll it:
.demo {overflow: visible; height: 100px;z-index: 3;}
.carousel {
color: #FFF;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
position: initial;
}
.carousel .c-item {
display: inline-block;
width: 35%;
background: #000;
height: 100px;
}
.carousel .abs {
background: #444;
display: inline-block;
vertical-align: top;
width: 35%;
max-height: 180px;
overflow-y: auto;
}
.carousel .abs .a-item {
height: 100px;
border: 1px solid #000;
}
.other {
background: yellow;
height: 200px;
}
<div class="demo">
<button onclick="document.querySelectorAll('.carousel')[0].scrollLeft += 20;" style="position: fixed; top: 50%; right: 0;">L</button>
<button onclick="document.querySelectorAll('.carousel')[0].scrollLeft -= 20;" style="position: fixed; top: 50%; left: 0;">R</button>
<div class="carousel">
<div class="c-item">Item-1</div>
<div class="abs">
<div class="a-item">Abs Item-1.1</div>
<div class="a-item">Abs Item-1.2</div>
<div class="a-item">Abs Item-1.3</div>
</div>
<div class="c-item margin">Item-2</div>
<div class="abs">
<div class="a-item">Abs Item-2.1</div>
<div class="a-item">Abs Item-2.2</div>
<div class="a-item">Abs Item-2.3</div>
</div>
</div>
</div>
<div class="other">
Other div
</div>
Hope that helps!
You have to play with position check snippet.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.carousel {
display: flex;
width: 100vw;
overflow-x: auto;
color: white;
}
.carousel>.item {
flex: 1 0 33.33%;
//margin-right: 5px;
}
.carousel>.item:nth-child(odd) {
background: black;
}
.carousel>.item:nth-child(even) {
background: darkgrey;
}
.carousel>.item,
.carousel>.item.multiple>div {
height: 100px;
}
.carousel>.item.multiple {
position: relative;
overflow-y: auto;
height: 200px;
}
.carousel>.item.multiple>div {
position: absolute;
width: 100%;
}
.carousel>.item.multiple>div:nth-child(2) {
top: 100px;
}
.carousel>.item.multiple>div:nth-child(3) {
top: 200px;
}
.other {
position: absolute;
z-index: -1;
top: 100px;
width: 100%;
background: green;
height: 117px;
}
/* And so on ...
.carousel>.item.multiple>div:nth-child(...) {}
*/
<div class="carousel">
<div class="item">
<div>Item-1</div>
</div>
<div class="item multiple">
<div>Item-1.1</div>
<div>Item-1.2</div>
<div>Item-1.3</div>
</div>
<div class="item">
<div>Item-2</div>
</div>
<div class="item multiple">
<div>Item-2.1</div>
<div>Item-2.2</div>
<div>Item-2.3</div>
</div>
</div>
<div class="other">
Other div
</div>
I have a fixed div and inside of it an x-scrollable div which contains many items.
this is my code :
<div class="gallery-items" style="position: fixed">
<div class="scrollable">
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
</div>
</div>
.gallery-items {
position: fixed;
.....
}
.scrollable {
overflow-x: scroll;
overflow-y: hidden;
width: 100%;
height: 100%;
white-space: nowrap;
}
.gallery-items-item {
height: 130px;
width: 150px;
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
margin-right: 10px;
position: relative;
background-color: #4d4d4d;
display: inline-block;
}
but the items are not aligned on the same scrollable line.. (http://croisentoi.com/cafe/menu/ when clicking on a picture)
Is there something I miss ? Thank you.
Add vertical-align: top; to .gallery-items-item to align them all to the top of gallery-items.
Try using
vertical-align:medium;
Hope it helps you..
Demo: http://codepen.io/malte/pen/kDlbt
I am using an absolute positioned wrapper to center an image in a thumbnail frame. (Only) On mobile safari, the image won't be displayed. if you inspect the .image-pos container you'll see that the height is properly set to its parent's size. applying a fixed px height to it will make the image show up... Does anyone know how to fix that?
It's working on any Desktop browser...
HTML:
<div class="wrapper">
<div class="thumb-grid">
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/016e551de2f53d58e7f4acd68279e6a1.JPG&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
</div>
</div>
CSS:
.wrapper {
width: 600px;
margin: 30px auto 0
}
.thumb-grid {
text-align: justify;
}
.thumb-grid:after {
content: '';
display: inline-block;
width: 100%;
}
.thumb {
position: relative;
display: inline-block;
width: 31.5%;
height: 0;
padding-top: 29%;
margin-bottom: 6%;
}
.image {
height: 73%;
overflow: hidden;
position: absolute;
text-align: center;
top: 0;
width: 100%;
vertical-align: top;
display: block;
border: 1px solid #eee;
}
.image-pos {
height: 100%;
left: 50%;
margin-left: -300px;
position: absolute;
text-align: center;
width: 600px;
}
.image-pos img {
height: 100%;
max-height: 100%;
min-height: 100%;
max-width: none;
width: auto;
display: inline;
border: 0;
}
.details {
height: 27%;
position: absolute;
top: 73%;
}
.details h5 {
margin: 0;
padding-top: 5px;
}
Demo: http://codepen.io/malte/pen/kDlbt