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>
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>
I'm trying to get the divs always be centered even after one div drops to the bottom if window size is adjusted. So basically if there are 5 divs and one drops to the bottom after window size reached a certain point, so the remaining 4 divs would still be centered. If possible it would be better if the one dropped wouldn't center but be on the left.
.item-holder {
width: 95%;
height: 80%;
margin-left: auto;
margin-right: auto;
overflow: scroll;
background-color: teal;
}
.item {
width: 300px;
height: 300px;
background-color: black;
float: left;
margin-right: 25px;
margin-left: 25px;
margin-bottom: 25px;
}
.item-text {
font-size: 20px;
color: white;
}
<div class="item-holder">
<div class="item">
<p class="item-text">Item 1</p>
</div>
<div class="item">
<p class="item-text">Item 2</p>
</div>
<div class="item">
<p class="item-text">Item 3</p>
</div>
<div class="item">
<p class="item-text">Item 4</p>
</div>
<div class="item">
<p class="item-text">Item 5</p>
</div>
<div class="item">
<p class="item-text">Item 6</p>
</div>
<div class="item">
<p class="item-text">Item 7</p>
</div>
<div class="item">
<p class="item-text">Item 8</p>
</div>
<div class="item">
<p class="item-text">Item 9</p>
</div>
<div class="item">
<p class="item-text">Item 10</p>
</div>
</div>
How the result should look
Use CSS Grid Layout
CSS Grid was like made for this purpose. In the following snippet, I have removed some of your lines and resized the children. But you need to pay attention to the three lines of code added to .item-holder.
I have also made the holder resizable, so you can play with it.
.item-holder {
width: 95%;
height: 80%;
background-color: teal;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 5px;
/* Following code makes the element resizable*/
resize: horizontal;
overflow: auto;
}
.item {
width: 100px;
height: 50px;
background-color: black;
}
.item-text {
font-size: 20px;
color: white;
}
<div class="item-holder">
<div class="item">
<p class="item-text">Item 1</p>
</div>
<div class="item">
<p class="item-text">Item 2</p>
</div>
<div class="item">
<p class="item-text">Item 3</p>
</div>
<div class="item">
<p class="item-text">Item 4</p>
</div>
<div class="item">
<p class="item-text">Item 5</p>
</div>
<div class="item">
<p class="item-text">Item 6</p>
</div>
<div class="item">
<p class="item-text">Item 7</p>
</div>
<div class="item">
<p class="item-text">Item 8</p>
</div>
<div class="item">
<p class="item-text">Item 9</p>
</div>
<div class="item">
<p class="item-text">Item 10</p>
</div>
</div>
Further Reading
See CSS Grid Layout on MDN
Learn CSS Grid Layout on freeCodeCamp.org
See CSS Grid Layout: Create flexible layouts using auto-fill on freeCodeCamp.org
You can make the .item-holder a flexbox
.item-holder {
width: 95%;
height: 80%;
margin-left: auto;
margin-right: auto;
overflow: scroll;
background-color: teal;
display: flex;
flex-flow: row wrap;
}
.item {
width: 100px;
height: 100px;
background-color: black;
float: left;
margin-right: 25px;
margin-left: 25px;
margin-bottom: 25px;
}
.item-text {
font-size: 20px;
color: white;
}
<div class="item-holder">
<div class="item">
<p class="item-text">Item 1</p>
</div>
<div class="item">
<p class="item-text">Item 2</p>
</div>
<div class="item">
<p class="item-text">Item 3</p>
</div>
<div class="item">
<p class="item-text">Item 4</p>
</div>
<div class="item">
<p class="item-text">Item 5</p>
</div>
<div class="item">
<p class="item-text">Item 6</p>
</div>
<div class="item">
<p class="item-text">Item 7</p>
</div>
<div class="item">
<p class="item-text">Item 8</p>
</div>
<div class="item">
<p class="item-text">Item 9</p>
</div>
<div class="item">
<p class="item-text">Item 10</p>
</div>
</div>
.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>
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>