.group {
background: #000;
margin-left: 25px;
margin-right: 25px;
padding: 15px;
width: inherit;
white-space: nowrap;
overflow-x: auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.item {
margin: 3px;
background-color: #ddd;
float: left;
padding: 20px;
width: 200px;
height: 300px;
}
<div class="group">
<div class="item">
<img src="someimage1.png" alt="..." style="height:150px;">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="someimage2.png" alt="..." style="height:150px">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="someimage3.png" alt="..." style="height:150px">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
</div>
There are 2 items in the topline and the next item goes to the next line instead of the same line. I want all 3 lines to be in the same line with horizontal scrolling. I thought that the float:left was affecting the scrolling but removing will lead to all 3 divisions being in separate lines
If you want all of them in one line with the scroll bar, try this:
.group {
background: #000;
margin-left: 25px;
margin-right: 25px;
padding: 15px;
width: inherit;
white-space: nowrap;
display: flex;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
overflow-x: scroll;
flex-wrap: nowrap;
}
.item {
margin: 3px;
background-color: #ddd;
float: left;
padding: 100px;
width: 100%;
height: 300px;
display: flex;
}
<div class="group">
<div class="item">
<img src="https://robohash.org/200" alt="..." style="height: 150px;" />
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="https://robohash.org/200" alt="..." style="height: 150px;" />
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="https://robohash.org/200" alt="..." style="height: 150px;" />
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="https://robohash.org/200" alt="..." style="height: 150px;" />
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="https://robohash.org/200" alt="..." style="height: 150px;" />
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="https://robohash.org/200" alt="..." style="height: 150px;" />
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="https://robohash.org/200" alt="..." style="height: 150px;" />
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
</div>
You just need to remove the float: left and add display: inline-block to your .item CSS.
.group {
background: #000;
margin-left: 25px;
margin-right: 25px;
padding: 15px;
width: inherit;
white-space: nowrap;
overflow-x: auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.item {
margin: 3px;
background-color: #ddd;
/* float: left; */
display: inline-block; /* Change the display to inline-block for div */
padding: 20px;
width: 200px;
height: 300px;
}
<div class="group">
<div class="item">
<img src="someimage1.png" alt="..." style="height:150px;">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="someimage2.png" alt="..." style="height:150px">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="someimage3.png" alt="..." style="height:150px">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
</div>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.container {
overflow-x: auto;
background: #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.group {
margin-left: 25px;
margin-right: 25px;
padding: 15px;
width: 600px;
display: flex
}
.item {
margin: 3px;
background-color: #ddd;
padding: 20px;
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="group">
<div class="item">
<img src="someimage1.png" alt="..." style="height:150px;">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="someimage2.png" alt="..." style="height:150px">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="someimage3.png" alt="..." style="height:150px">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I have the following CSS layout:
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
nav {
background-color: darkslateblue;
color: white;
padding: 20px;
}
main h2 {
padding: 20px 20px 10px 20px;
}
#item-wrapper {
display: flex;
padding: 10px;
}
#item-selector,
#item-viewer {
margin: 0 10px;
}
#item-selector {
display: flex;
flex-direction: column;
width: 250px;
overflow-y: scroll;
}
#item-viewer {
flex: 1;
height: 50vh;
}
.item {
border: 3px solid darkslateblue;
margin-bottom: 10px;
padding: 10px;
cursor: pointer;
}
#item-viewer {
border: 3px solid darkslateblue;
}
<nav>
<h1>Header</h1>
</nav>
<main>
<h2>Your items:</h2>
<div id="item-wrapper">
<div id="item-selector">
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
</div>
<div id="item-viewer">
<p style="padding: 10px;">Select an item on the left to view more information</p>
</div>
</div>
</main>
I want the scrollable div on the left to not exceed the height of the window. I have tried setting the height of <body> and <html> to 100vh and adding overflow: auto and overflow: hidden to body, html, #item-wrapper and #item-selector but none of these worked. If I give #item-selector and explicit height then it works, but I want it to fill the remainder of the window height so this isn't ideal. I would like #item-selector to not exceed the height of the page and to scroll when its contents exceed its height.
You have to apply height settings to all parent elements, so html and body and #item-selector get height: 100%;, and main has to get a calculated height value, which subtracts the height of the nav and h2 elements from 100%. height: calc(100% - 130px); will approximately do that like in the snippet below, but you either would have to define exact height settings for nav and h2, or use javascript to get their actual heights.
* {
margin: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
height: 100%;
}
nav {
background-color: darkslateblue;
color: white;
padding: 20px;
}
main {
height: calc(100% - 130px);
}
main h2 {
padding: 20px 20px 10px 20px;
}
#item-wrapper {
display: flex;
padding: 10px;
height: 100%;
}
#item-selector,
#item-viewer {
margin: 0 10px;
}
#item-selector {
display: flex;
flex-direction: column;
width: 250px;
overflow-y: scroll;
height: 100%;
}
#item-viewer {
flex: 1;
height: 50vh;
}
.item {
border: 3px solid darkslateblue;
margin-bottom: 10px;
padding: 10px;
cursor: pointer;
}
#item-viewer {
border: 3px solid darkslateblue;
}
<nav>
<h1>Header</h1>
</nav>
<main>
<h2>Your items:</h2>
<div id="item-wrapper">
<div id="item-selector">
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
</div>
<div id="item-viewer">
<p style="padding: 10px;">Select an item on the left to view more information</p>
</div>
</div>
</main>
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
nav {
background-color: darkslateblue;
color: white;
padding: 20px;
height: 10vh;
}
main h2 {
padding: 5px 20px 20px 20px;
}
#item-wrapper {
display: flex;
padding: 10px;
height:85vh;
}
#itemHeaderWrapper{
height:5vh;
}
#item-selector,
#item-viewer {
margin: 0 10px;
}
#item-selector {
display: flex;
flex-direction: column;
width: 250px;
overflow-y: scroll;
}
#item-viewer {
flex: 1;
height: 50vh;
}
.item {
border: 3px solid darkslateblue;
margin-bottom: 10px;
padding: 10px;
cursor: pointer;
}
#item-viewer {
border: 3px solid darkslateblue;
}
<nav>
<h1>Header</h1>
</nav>
<main>
<div id='itemHeaderWrapper'>
<h2>Your items:</h2>
</div>
<div id="item-wrapper">
<div id="item-selector">
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
</div>
<div id="item-viewer">
<p style="padding: 10px;">Select an item on the left to view more information</p>
</div>
</div>
</main>
In this code, I've wrapped the h2 tag in a div, id 'itemHeaderWrapper' which I've given a pre-defined height of 5vh. I've also set the height of the nav to 10vh. This means I can force the scrollable div on the left to have height 85vh and then scroll.
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 1 year ago.
I am trying to make a gallery that is uneven and staggered by using images and colored divs that are not the same size. I have the columns set to a min of 352px and to auto-fit the screen. So the container with grid looks something like this:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
grid-gap: 20px;
The issue I am having is the tallest picture sets the height of the row and the divs that have the smaller images follow the same height. Is there a way to tell the items in the row to not all be the same size? Or rather just target certain items in each row and tell them to be a specific height?
.grey {
background: #D9D9D9;
}
.tan {
background: #DCCEC8;
}
.light-brown {
background: #DC997D;
}
.brown {
background: #814A3D;
}
.black {
background: #000;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
grid-gap: 20px;
}
.grid > div {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
img {
max-width: 350px;
width: 350px;
}
.overlay {
position: absolute;
width: 350px;
height: 100%;
background: rgba(0, 0, 0, 0.05);
}
h4 {
text-transform: uppercase;
font-size: 26px;
color: #fff;
position: absolute;
z-index: 9;
}
h4:nth-child(2) {
bottom: 35px;
}
h4:nth-child(3) {
font-size: 18px;
margin: 5px 0;
bottom: 5px;
}
.fill {
max-width: 350px;
height: 100%;
width: 100%;
}
<div class='grid'>
<div>
<img class="thumbnail" src="https://picsum.photos/500/600" alt="person" />
<h4>Person One</h4>
<h4>#person1</h4>
<div class="overlay"></div>
</div>
<div><div class="tan fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
<h4>Person TWO</h4>
<h4>#person2</h4>
<div class="overlay"></div>
</div>
<div><div class="black fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/700/700" alt="person" />
<h4>Person 3</h4>
<h4>#person3</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/400/400" alt="person" />
<h4>Person four</h4>
<h4>#person4</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/500/260" alt="person" />
<h4>Person Five</h4>
<h4>#pesron5</h4>
<div class="overlay"></div>
</div>
<div><div class="light-brown fill"></div></div>
<div><div class='brown fill'></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/600/220" alt="person" />
<h4>Person Six</h4>
<h4>#person6</h4>
<div class="overlay"></div>
</div>
<div><div class="black fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/200/350" alt="person" />
<h4>Person Seven</h4>
<h4>#person7</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/500/300" alt="person" />
<h4>Person Eight</h4>
<h4>#person8</h4>
<div class="overlay"></div>
</div>
<div><div class="tan fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/250/250" alt="person" />
<h4>Person Nine</h4>
<h4>#Person9</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
<h4>Person Ten</h4>
<h4>#person10</h4>
<div class="overlay"></div>
</div>
</div>
Use height on the grid items. Moreover, the headings should be wrapped in a container and their default margins should be overwritten so that headings fit in container with image's height < 150px.
.grey {
background: #d9d9d9;
}
.tan {
background: #dccec8;
}
.light-brown {
background: #dc997d;
}
.brown {
background: #814a3d;
}
.black {
background: #000;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
grid-gap: 20px;
}
.grid>div {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
img {
max-width: 350px;
width: 350px;
}
.overlay {
position: absolute;
width: 350px;
height: fit-content;
background: rgba(0, 0, 0, 0.05);
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
h4 {
text-transform: uppercase;
font-size: 26px;
color: #fff;
z-index: 9;
text-align: center;
margin: 0;
margin-bottom: 10px;
}
.fill {
max-width: 350px;
height: 100%;
width: 100%;
}
.grid-item {
height: fit-content;
height: -moz-fit-content;
}
<div class="grid">
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/500/1000" alt="person" />
<div class="overlay">
<h4>Person One</h4>
<h4>#person1</h4>
</div>
</div>
<div>
<div class="tan fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/1500/2000" alt="person" />
<div class="overlay">
<h4>Person TWO</h4>
<h4>#person2</h4>
</div>
</div>
<div>
<div class="black fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/700/1500" alt="person" />
<div class="overlay">
<h4>Person 3</h4>
<h4>#person3</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/400/100" alt="person" />
<div class="overlay">
<h4>Person four</h4>
<h4>#person4</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/500/200" alt="person" />
<div class="overlay">
<h4>Person Five</h4>
<h4>#pesron5</h4>
</div>
</div>
<div>
<div class="light-brown fill"></div>
</div>
<div>
<div class="brown fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/600/220" alt="person" />
<div class="overlay">
<h4>Person Six</h4>
<h4>#person6</h4>
</div>
</div>
<div>
<div class="black fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/200/150" alt="person" />
<div class="overlay">
<h4>Person Seven</h4>
<h4>#person7</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/500/300" alt="person" />
<div class="overlay">
<h4>Person Eight</h4>
<h4>#person8</h4>
</div>
</div>
<div>
<div class="tan fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/250/250" alt="person" />
<div class="overlay">
<h4>Person Nine</h4>
<h4>#Person9</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
<div class="overlay">
<h4>Person Ten</h4>
<h4>#person10</h4>
</div>
</div>
</div>
This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
After some rows the css float property have a strange behavior that i couldn't know its reason.
Take into account that I cannot add a div with a "clear" property between the rows because the html will be generated dynamically (php loop).
I think that in order to do that I should create a function in php that determines when to insert a clear div between the rows because sometimes there are 2 images per and other times 3.
But I prefer a CSS solution.
Here is the full code:
.row {
width: 600px;
text-align: center;
margin: 0 auto;
}
.boxes{
box-sizing: border-box;
position: relative;
min-height: 1px;
height: auto;
float: left;
padding-left: 10px;
padding-bottom: 10px;
}
.box1 {
width: 33.33333333333333%;
}
.box2 {
width: 66.66666666666666%;
}
.box-inner {
background-color: grey;
width: 100%;
height: 100%;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
<html>
<body>
<div class="row">
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
</div>
</body>
</html>
In your example, you have an image that's slightly shorter than the one before it. That's causing the gap on the following row which clear would normally fix. if you had the same number of elements per row then something like nth-child could be used with clear, but since you said the number of elements per line could change, that wouldn't work. An easy fix is to set a minimum height on your .box-inner class:
.row {
width: 600px;
text-align: center;
margin: 0 auto;
}
.boxes {
box-sizing: border-box;
position: relative;
min-height: 1px;
height: auto;
float: left;
padding-left: 10px;
padding-bottom: 10px;
}
.box1 {
width: 33.33333333333333%;
}
.box2 {
width: 66.66666666666666%;
}
.box-inner {
background-color: grey;
width: 100%;
height: 100%;
min-height: 122px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
<div class="row">
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
</div>
The easiest solution is to add a fixed height to your container.
.box-inner {
background-color: grey;
width: 100%;
height: 120px;
overflow: hidden;
}
Another addition to the above is to add object-fit: cover to your image to ensure it fills the container space.
.box-inner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
I am making a instagram type of feed and have a 4 images with a further 4 below those 4. I need to make a overlay which I can put words in front of all 8 images showing instagram followers and a link to their instagram.
I have most of it done but the overlay I cannot seem to get it to work. Any help would be appreciated, thanks in advance.
Josh
<ul class="images">
<div class="col-sm-3">
<img src="img/instagram/image-1.jpg" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="img/instagram/image-2.jpg" alt="Image Gallery" class="img-responsive">
</div>
</ul>
Use o overlay div with position absolute covering the entire images container like the example....
.images{
position:relative;
display:inline-block;
}
.overlay{
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.5);
width: 100%;
height: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
}
.images:hover .overlay{
visibility: visible;
}
<div class="images">
<div class="col-sm-3">
<img src="http://via.placeholder.com/350x150" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="http://via.placeholder.com/350x150" alt="Image Gallery" class="img-responsive">
</div>
<div class='overlay'>
<span>some text</span>
</div>
</div>
Like this? You can put whatever words in the overlay as you want. I used xs columns so you could see it fully.
.overlay{
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:rgba(0,0,0,.5);
z-index:10;
}
.overlay h2{
color:#fff;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="overlay">
<h2>Follow me on Insta</h2>
</div>
<div class="row images">
<div class="col-xs-3">
<img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
</div>
</div>
</div>
I think the below is what you need. I used flexboxes for layout.
* {
box-sizing: border-box;
}
.container {
display: flex;
justify-content: flex-start;
flex-flow: wrap;
width: 500px;
}
.item {
display: inline-block;
margin: 0 0.5em 0.5em 0;
position: relative;
}
.text {
opacity: 0;
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
top: 0;
}
.text:hover {
border: thin solid red;
animation: opac 0.3s ease forwards;
}
#keyframes opac {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row-sm-12 container">
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
</div>
I have a goods list - floating div with position: relative. I need to change height of this block (for buttons like 'Add to basket') when I hover it without touching/moving another blocks. For example: wildberries.ru/catalog/20/women.aspx
I've tried to copy styles from that site but have failed. I don't fully understanding how it work =|
I have something like this:
#goods { width: 330px }
.item {
position: relative;
float: left;
width: 80px;
height: 140px;
margin: 5px;
padding: 8px;
border: solid 1px #999;
overflow: hidden;
text-align: center;
}
.item:hover {
height: 180px;
}
p { margin: 3px }
<div id="goods">
<div class="item">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
<div class="item">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
<div class="item">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
<div class="item">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
<div class="item">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
</div>
add an innerWrap div to .item and use position: absolute;
#goods { width: 330px }
.item {
position: relative;
float: left;
width: 80px;
margin: 5px;
padding: 8px;
height: 145px;
text-align: center;
}
.itemWrap{
height: 145px;
overflow: hidden;
border: solid 1px #999;
position: absolute;
}
.item:hover .itemWrap{
height: 180px;
z-index: 2;
background: #fff;
}
p { margin: 3px }
<div id="goods">
<div class="item">
<div class="itemWrap">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
</div>
<div class="item">
<div class="itemWrap">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
</div>
<div class="item">
<div class="itemWrap">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
</div>
<div class="item">
<div class="itemWrap">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
</div>
<div class="item">
<div class="itemWrap">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
</div>
</div>