I am trying to center stack of divs 3 per row if browser window is biger than 1024 and if it is less than 1024 to show 2 divs in row but keep showing all 6 of them.
Currently i am having a problem to migrate what i have already found out as it doesn't really fit to the div.
Here is my previous example of how it was supposed to look but i did not tried to pack it into divs.
h3 {
word-break: break-word; /* non standard for webkit */
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.img{
width:640px;
height:100%;
}
.image {
position: relative;
width: auto; /* for IE 6 */
max-height: 640px;
}
h2{
background-color: rgba(0, 0, 0, 0.5);
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-top: 10px;
position: absolute;
bottom:-15px;
left: 0;
width: 600px;
color:white;
}
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">A Movie in the Park: Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">A Movie in the Park: Kung Fu Panda saasffdafadfadfda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incomprehensibilities ffafefeafea fefeefes gregrgregregerge</h2>
</div>
Here is what i tried to do with divs but it doesn't work the same way so i couldn't implement those properties.
body{
background-color:darkgrey;
}
.row{
left: 50%;
}
#media (min-width: 1024px) { .col-3::after{width:37.5%} }
.col-3 {width: 25%; float: left; border: 1px solid white;
margin-right: 20px;height:auto; margin-bottom: 20px;
}
img {
max-width: 100%;
max-height: 100%;
}
h2{
background-color: rgba(0, 0, 0, 0.5);
word-break: break-word; /* non standard for webkit */
font-size: 2vw;
max-width: 100%;
max-height: 100%;
color:white;
}
<body>
<div class="row">
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
</div>
</body>
Using floats and media queries you can achieve this result. I used flexbox to center a wrapper that contains all 6 divs so everything remains centered despite div width or viewport dimensions. Next you can float all inner divs left and use nth-child to target only the ones you want to clear which will determine your column number. Use a media-query to target a viewport wider than 1025pxand simply change your nth-child pseudoclass accordingly.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
html {
font-family: sans-serif;
}
body {
display: flex;
align-items: center;
}
.wrapper {
overflow: hidden;
margin: auto;
padding: 0.75rem;
background-color: #eee;
}
div > div {
padding: 0.75rem 1.5rem;
margin: 0.5rem;
background-color: #ccc;
float:left;
}
div:nth-child( 4n ){
clear: left;
}
.note {
width: 100%;
padding: 1rem;
background-color: #000;
color: #eee;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
#media( max-width: 1025px ){
div:nth-child( 2n + 3 ){
clear: left;
}
div:nth-child( 4n ){
clear: none;
}
.note {
background-color: rgba( 0, 0, 0, 0.6 );
}
}
<div class="note">Resize viewport to change layout</div>
<div class="wrapper">
<div>div1</div> <div>div2</div> <div>div3</div>
<div>div4</div> <div>div5</div> <div>div6</div>
</div>
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 1 year ago.
how do I make the three images on the top not go outside the div while keeping them to be 100% width so that their size remains the same and will be resized based on the browser size?
PS: I need them to be in row form
The ideal result should be like this:
#main {
background-color: #666666;
padding: 60px;
width: 390px;
}
#second {
display: flex;
flex-direction: row;
width: 100%;
margin-bottom: 30px;
}
.img-child {
width: 100%;
margin-right: 30px;
}
.img-child:last-child {
margin-right: 0;
}
#img-parent {
width: 100%;
}
<div id=main>
<div id=second>
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
you need to add a min-width to your image. flex needs this for whatever reason, otherwise it will not downscale the elements. I come across this every time i use flex :D
.img-child {
min-width: 0;
width: 100%;
margin-right: 30px;
}
Try this :
body
{
height:100vh;
justify-content:center;
align-items:center;
display:flex;
}
#main {
width:391px;
background-color: #666666;
}
#main .img
{
width:100px;
float:left;
margin:15px;
}
#main .img:nth-child(4)
{
width:360px;
}
img
{
max-width:100%;
}
<div id=main>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
</div>
You can use max-width for each img.
I have edited your code for calculate padding each image below...
#main {
background-color: #666666;
padding: 60px;
width: 390px;
}
#second > div {
flex-basis: 100%;
flex-grow:1;
flex-shrink: 1;
padding-left: 15px;
padding-right:15px;
max-width:100%;
}
.img-child {
max-width:100%;
}
#second {
display: flex;
flex-direction: row;
margin-bottom: 30px;
margin-left:-15px;
margin-right:-15px;
}
#img-parent {
width: 100%;
}
<div id=main>
<div id=second>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
#second{
display: flex;
align-items: center;
justify-content: space-around;
}
.img-child{
width: 30%;
margin-top: 30px;
margin-bottom: 30px;
}
#img-parent{
width: 97%;
margin-left: 12px;
}
<div id=main>
<div id=second>
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
* {
box-sizing: border-box;
}
.main {
background-color: #666666;
padding: 60px;
width: 100%;
}
.second {
background-color: #666666;
display: flex;
flex-direction: row;
margin-bottom: 10px;
}
.column {
float: left;
width: 33.3%;
padding: 5px;
}
.largep {
background-color: #666666;
display: flex;
flex-direction: row;
width: 100%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<style>
</style>
</head>
<body>
<div class="row main">
<div class="column second">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column second">
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column second">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
<div class="largep">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
In fact, I would like to put my elements towards the left as below:
On my second_text class, I added text-align: left; but I always have the same problem.
.second_text{
padding-top: 10px;
text-align: left;
}
It is possible to force the block to left?
body{
padding-top:200px;
}
.container{
width: 95%;
margin: 0 auto;
}
.row{
display: flex;
padding-left: 20px;
padding-bottom:50px;
padding-top: 50px;
margin-left: 10%;
}
.img-block{
width: 4%;
}
.wrapper{
display: flex;
flex-direction: column;
padding-left: 15px;
}
.title{
padding-bottom: 10px;
}
.vertical{
border-left: 1px solid black;
height: 60px;
margin-left: 20px;
}
.img-block {
height: 28px;
padding-left: 15px;
width: 50px;
display: inline-block;
}
.img-pic{
display: inline-block;
height: 20px;
}
.second_text{
padding-top: 10px;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<div class="container">
<div class="row">
<img class="img-block" src="https://zupimages.net/up/20/21/mz4v.png" alt="image"/>
<div class="wrapper">
<div class="title">Phone</div>
<div class="second_text">Just For VIP Member</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/21/wgl0.png" alt="image"/>
<div class="wrapper">
<div class="title">Email Us</div>
<div class="second_text">admin#superbtc.biz</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/epbs.png" alt="image"/>
<div class="wrapper">
<div class="title">Follow us</div>
<div class="second_text">
<img class="img-pic" src="https://zupimages.net/up/20/34/pnpm.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/qgz1.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/gdph.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/alck.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/evtq.png" alt="image"/>
</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/txjb.png" alt="image"/>
<div class="wrapper">
<div class="title">Address</div>
<div class="second_text">2699 BORAMBOLA, New South Wales,Australia.</div>
</div>
</div>
</div>
</body>
</html>
Try using Negative Values to .second_text i.e Margin-left: -40px
Though this is not a best fix but can be a quick fix.
A simplified version. Restructure like this
.row {
display: flex;
}
.row .wrapper {
flex-grow: 1;
position: relative;
}
.row .wrapper .first-text {
display: flex;
align-items: center;
padding: 5px 15px;
}
.row .wrapper .second-text {
padding: 5px 15px;
}
.row .wrapper .first-text img {
margin-right: 15px;
}
.verticle {
background: black;
width: 1px;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
<div class="row">
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
</div>
A better solution would be to use position: relative and left: -40px on your .second_text.
I'm trying to center three div boxes within one large one. A grid is going to be 3 wide and auto height.
.t-box920g {
width: 960px;
height: auto;
background: #121212;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
position: relative;
overflow: auto;
border: 1px dotted #363636;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.i-box {
width: 279px;
height: 209px;
background: #ffffff;
margin-right: auto;
margin-left: auto;
float: left;
display: inline;
text-align: justify;
}
.i-pbox {
width: 276px;
height: 206px;
background: #121212;
border: solid 2px #ffffff;
margin-left: auto;
margin-right: auto;
text-align: justify;
}
#i-imageconstrain {
width: auto;
height: auto;
max-width: 276px;
max-height: 206px;
min-width: 276px;
min-height: 206px;
overflow-x: hidden;
overflow-y: hidden;
}
<div class="t-box920g">
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample1.jpg">
<img id="i-imageconstrain" src="images/gallery/sample1.jpg" border="0" />
</a>
</div>
</div>
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample2.jpg">
<img id="i-imageconstrain" src="images/gallery/sample2.jpg" border="0" />
</a>
</div>
</div>
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample3.jpg">
<img id="i-imageconstrain" src="images/gallery/sample3.jpg" border="0" />
</a>
</div>
</div>
</div>
Everything works as planned EXCEPT for the content of t-box920g being left justified. I've tried a lot of combos and none have worked so far. Got a suggestion? I'll let you know if I tried already.
Tried text-align, align-content, align-items, margin: auto in combinations for all css.
I expect it to be center justified with nice even spacing. Actually is all left.
Use flexbox.
You can read more about how to use it here and here if you like to learn through games.
This question was asked and answered on Stack Owerflow already more than once, for instance here.
.t-box920g {
display: flex;
justify-content: space-between;
align-items: center;
}
.t-box920g .i-box {
background-color: blue;
width: 32%;
}
<div class="t-box920g">
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample1.jpg">
<img id="i-imageconstrain" src="images/gallery/sample1.jpg" border="0" />
</a>
</div>
</div>
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample2.jpg">
<img id="i-imageconstrain" src="images/gallery/sample2.jpg" border="0" />
</a>
</div>
</div>
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample3.jpg">
<img id="i-imageconstrain" src="images/gallery/sample3.jpg" border="0" />
</a>
</div>
</div>
</div>
I am trying to create responsive div with image, text and spacing between divs.
I had divs with spacing and text but they wouldn't resize on more text.
I am trying to achive something like this.
This one is with more text in some of the divs and every other div resizes as well.
Here is what i got:
.img{
width:300px;
height:100%;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h3{
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 105px;
left: 0;
width: 300px;
color:white;
}
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>sadasdsadsadsadsadsadasdasdsadsadsadsadas</h2>
</div>
i need div to resize to amount of text and covers bottom part of it.
Currently i am breaking text with < br > which is not how i am aiming to do it.
Try word-wrap: break-word; property on h3
h3{
word-wrap: break-word;
}
Hope this Helps..
In case you'd like to have hyphenation, you could use the css "hyphens" property, which lets the browser decide where to break. See an example (with fallback, as the browser support is not so good, especially for some languages)
h3 {
word-break: break-word; /* non standard for webkit */
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.img{
width:300px;
height:100%;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h3{
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 105px;
left: 0;
width: 100px;
color:white;
}
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3 lang="en">A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3 lang="en">A Movie in the Park: Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3 lang="en">Incomprehensibilities </h2>
</div>
sadasdsadsadsadsadsadasdasdsadsadsadsadas this is garbage value, this is not word you can use like this
.img{
width:300px;
height:100%;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h3{
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 105px;
left: 0;
width: 300px;
color:white;
}
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>sadasdsa dsadsadsadsa dasdasdsads adsadsadas</h2>
</div>
you can use word-break: break-all; to h3
.img{
width:300px;
height:100%;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h3{
background-color: rgba(0, 0, 0, 0.5);
word-break: break-all;
position: absolute;
top: 105px;
left: 0;
width: 300px;
color:white;
}
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h3>sadasdsadsadsadsadsadasdasdsadsadsadsadas</h2>
</div>
I've recently discovered a neat way to do a masonry layout using columns, as found here: http://w3bits.com/css-masonry/. I've expanded on this layout by adding an overlay with text to each item upon hover. This works pretty well except for 2 problems:
The overlay is slightly larger than the image at the bottom. This persists even when different images are used.
The transitions do not work; the hover effect displays and hides abruptly.
Some explanations regarding my code:
I've added margin: 0; border:0; padding:0 to the entire document in an attempt to prevent problems just like this one, to no avail. .item has margin: 0 0 20px to provide vertical spacing between each item.
Because .item-overlay requires position:absolute to work, and position:absolute requires the parent element to be positioned, I've added position:relative to .item. This doesn't affect anything beyond allowing the overlay to show up correctly, as far as I can tell.
.item-overlay uses display:flex to vertically and horizontally centralise its content, but this shouldn't affect the layout.
Could someone help me figure out what's wrong with the code? JSFiddle: https://jsfiddle.net/nattanyz/sfn47me9/1/
Use vertical-align: top on the img and transition opacity instead of display
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: honeydew;
font-size: 16px;
line-height: 120%;
color: #333;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100vh;
width: 80vw;
max-width: 1200px;
margin: auto;
border: 0;
padding: 0;
column-count: 3;
column-gap: 20px;
}
.item {
display: block;
margin: 0 0 20px;
border: 0;
width: 100%;
position: relative;
}
.item-overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(51, 51, 51, 0.6);
color: white;
opacity: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(51, 51, 51, 0.6);
transition: opacity 300ms ease;
}
.item:hover .item-overlay {
opacity: 1;
}
.project-img {
width: 100%;
margin: 0;
border: 0;
padding: 0;
vertical-align: top;
}
.project-name {
font-weight: bold;
}
.project-category {
font-size: 0.75em;
text-transform: uppercase;
<body>
<div class="wrapper">
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" />
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
</div>
</body>
The overlay is slightly larger than the image at the bottom. This persists even when different images are used.
The problem is on the image itself, it has height smaller than the container. Try to put some background-color on the container, you will see that the overlay height is equal with it's parent.
The transitions do not work; the hover effect displays and hides abruptly.
You cannot implements transition on the css display, other alternative would be using opacity. I modified your code, please try.
html {
box-sizing:border-box;
}
*, *:before, *:after {
box-sizing:inherit;
}
body {
background-color:honeydew;
font-size: 16px;
line-height: 120%;
color: #333;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100vh;
width: 80vw;
max-width:1200px;
margin: auto;
border: 0;
padding: 0;
column-count: 3;
column-gap: 20px;
}
.item {
display:block;
margin: 0 0 20px;
border:0;
width:100%;
position:relative;
background-color: black;
}
.item-overlay {
position:absolute;
top:0;
left:0;
bottom:0;
width:100%;
background-color: rgba(51,51,51,0.6);
color:white;
opacity:0;
transition:300ms ease opacity;
display: flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.item:hover .item-overlay {
opacity: 1;
background-color: rgba(51,51,51,0.6);
}
.project-img {
width:100%;
margin:0;
border:0;
padding:0;
}
.project-name {
font-weight:bold;
}
.project-category {
font-size:0.75em;
text-transform:uppercase;
<body>
<div class="wrapper">
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
<div class="item">
<img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/>
<div class="item-overlay">
<p class="project-name">Project Name</p>
<p class="project-category">Commercial</p>
</div>
</div>
</div>
</body>