I put some HTML/CSS together in order to customize a content block on Squarespace. 4 images floating inline. I want to hover on the image and for it to fade into another image, creating the illusion of zooming out. Everytime I try to implement the commands to do this, I break it. The new image isn't centered on the existing image and in some cases, finds a new position on the page. I want to keep the current structure intact.
Can someone please help me with adding the new code in order to achieve this?
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 25%;
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
div.desc {
padding: 15px;
text-align: center;
}
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd2_png.png" style="width:100%">
<div class="desc">Sarah Nordean</div>
</div>
<div class="column">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sct2_png.png" style="width:100%">
<div class="desc">Scott Everingham</div>
</div>
<div class="column">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd3_png.png" style="width:100%">
<div class="desc">Serena Beaulieu</div>
</div>
<div class="column">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd4_png.png" style="width:100%">
<div class="desc">Shawn Evans</div>
</div>
</div>
UPDATE: this is now an answer to how to make one image fade into another on the given code.
I found that using the given card-changing code caused flickering on hover so I have changed it slightly so that existing main code remains as is except each img is wrapped in a div. This has as background-image the image that will be faded into. Some CSS is added to make the transition to/from opacity on hover
Here is the complete code, as given in the question with the additions listed above:
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 25%;
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
div.desc {
padding: 15px;
text-align: center;
}
/* ADDED CSS */
div.background {
width:100%;
height:auto;
background-position: 0px 8px;
background-repeat:no-repeat no-repeat;
background-size:contain;
margin: 0;
padding: 0;
}
img { opacity : 1; transition:opacity 0.3s; }
img:hover { opacity : 0;}
</style>
<body>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<div class="background" style="background-image:url(https://vivianeart.com/wp-content/uploads/2020/10/sct2_png.png);">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd2_png.png" style="width:100%;">
</div>
<div class="desc">Sarah Nordean</div>
</div>
<div class="column">
<div class="background" style="background-image:url(https://vivianeart.com/wp-content/uploads/2020/10/sd3_png.png);">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sct2_png.png" style="width:100%">
</div>
<div class="desc">Scott Everingham</div>
</div>
<div class="column">
<div class="background" style="background-image:url(https://vivianeart.com/wp-content/uploads/2020/10/sd4_png.png);">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd3_png.png" style="width:100%">
</div>
<div class="desc">Serena Beaulieu</div>
</div>
<div class="column">
<div class="background" style="background-image:url(https://vivianeart.com/wp-content/uploads/2020/10/sd2_png.png);">
<img src="https://vivianeart.com/wp-content/uploads/2020/10/sd4_png.png" style="width:100%">
</div>
<div class="desc">Shawn Evans</div>
</div>
</div>
</body>
</html>
This is the original text in this answer post asking for clarification.
This wasn't claiming to be an answer but was asking for clarification of some code which cannot be done in a comment.
Here is the code Al Taljana put in a comment - with background-colors put in by me in lieu of actual images. Could you verify that this is the effect you want - basically just changing one image for another? (Run the snippet and hover over the rectangle).
.card { width: 130px; height: 195px; background: url("images/card-back.jpg") no-repeat; display: inline-block; background-color:magenta; }
.card:hover { background: url("images/card-front.jpg") no-repeat; background-color: cyan; }
<div class="card">
</div>
Now, I am not too sure about what are the exact images that you will like to use, but here is a template of how the code for it to work.
img {
transition: all linear 0.7s;
}
.box {
position: relative;
}
img.hover-img {
position: absolute;
opacity: 0;
}
.box:hover img.hover-img {
opacity: 1;
}
<div class="box">
<img class="hover-img" src="https://www.redbridgenet.com/wp-content/uploads/html5.png" alt="Image name"
width="300" height="300">
<img src="https://wwwtalks.com/wp-content/uploads/2017/11/logo-2582748_640-300x300.png" alt="Image name" width="300" height="300">
</div>
Related
I'm trying to make a home page where there is 6 blocks of images with 3 columns. But also want those 6 blocks to show as 2 columns on mobile view.
I have attached some images of what I want it to look like and my code that I'm using. I've tried different types of flex-wrap but I'm not getting it to work properly.
Here is the link to jsfiddle - https://jsfiddle.net/7frjmeat/
Here is the current desktop view
Here is what I'm hoping for the mobile view to look like -
Code
html,
body,
a,
{
width: 100%;
height: 100%;
margin: 0;
}
p {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 200%;
}
hr {
width: 25%;
height: 1px;
background: #c6c6c6;
border: none;
outline: none;
margin-bottom: 0.25%;
}
.logo {
text-align: center;
width: 20%;
height: auto;
}
.logo img {
width: 100%;
height: auto;
padding-top: 4%;
}
.flex {
display: flex;
max-width: 75%;
width: 100%;
height: 100%;
}
.flex div {
flex: 1;
padding: 2px;
}
.img1 {
width: 100%;
transition: all 0.3s;
padding-top: 5%;
}
.img1:hover {
transform: scale(1.03);
}
.line-break {
width: 100%;
}
#media only screen and (max-width:768px) {
.logo,
.logo img {
display: inline;
width: 60%;
max-width: 100%;
padding: 0;
margin: 0;
}
.flex,
.flex div,
.img1,
img:hover {
transition: none !important;
transform: none !important;
max-width: 100%;
}
p {
font-size: 150%;
padding-bottom: 10px;
}
hr {
margin-bottom: 5%;
}
.line-break {
width: 0%;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="logo">
<img src="https://via.placeholder.com/742x180" />
</div>
<hr>
<div class="flex">
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
</div>
<div class="line-break"></div>
<div class="flex">
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
</div>
So you need to put all of the elements inside of one flex box to really have it effect the whole group. Additionally you need to set break-points for CSS to know how many items are in a row. I generally just use min-width.
Basically set a width on items, used box-sizing to include the padding in the width, used flex-wrap to wrap content, and changed the width on the mobile version to be a two column layout. **Edit I also altered the HTML to put everything in one flex-box container.
Here's the code working for your layout. Granted it loses the HR tag.
CSS
html,
body,
a {
width: 100%;
height: 100%;
margin: 0;
}
p {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 200%;
}
hr {
width: 25%;
height: 1px;
background: #c6c6c6;
border: none;
outline: none;
margin-bottom: 0.25%;
}
.logo {
text-align: center;
width: 20%;
height: auto;
}
.logo img {
width: 100%;
height: auto;
padding-top: 4%;
}
.flex {
display: flex;
max-width: 75%;
width: 100%;
height: 100%;
flex-wrap: wrap;
flex-basis: auto;
justify-content: space-evenly;
}
.flex div {
flex: 1;
padding: 2px;
min-width: 33%;
box-sizing: border-box;
}
.img1 {
width: 100%;
transition: all 0.3s;
padding-top: 5%;
}
.img1:hover {
transform: scale(1.03);
}
.line-break {
width: 100%;
}
#media only screen and (max-width:768px) {
.logo,
.logo img {
display: inline;
width: 60%;
max-width: 100%;
padding: 0;
margin: 0;
}
.flex,
.flex div,
.img1,
img:hover {
transition: none !important;
transform: none !important;
max-width: 100%;
}
p {
font-size: 150%;
padding-bottom: 10px;
}
hr {
margin-bottom: 5%;
}
.line-break {
width: 0%;
}
.flex div {
min-width: 50%;
}
}
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<center>
<div class="logo">
<img src="https://via.placeholder.com/742x180" />
</div>
<hr>
<div class="flex">
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
</div>
</center>
If the width of a parent div is flexible, but the contents inside of a div don't have to be, you can use display: inline-block in the image class. This will help you get the effect that you want to achieve.
An example implementation would be
<div class="main-container">
<img class="inline-image" src="img1">
...
</div>
This is just a basic example; but you can achieve this behavior using either Flexbox or CSS Grid, depending on how exactly you want the items to arrange themselves.
Flexbox usually is better for one-dimensional layouts, that meaning, when you want items to be aligned in one direction (either columns or rows); while CSS Grid is a lot easier to handle two-dimensional layouts where you need items to be aligned in both directions.
Take a look:
body * {
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 200px);
justify-content: center;
grid-gap: 15px;
grid-auto-rows: minmax(100px, auto);
}
.grid-item {
border: 1px solid black;
}
.flex {
width: 100%;
max-width: 650px;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.flex-item {
border: 1px solid blue;
min-height: 100px;
flex: 1 1 30%;
margin: 5px;
}
#media (max-width: 590px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
.flex-item {
border: 1px solid blue;
min-height: 100px;
flex: 1 1 45%;
margin: 5px;
}
}
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<div class="flex">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
I need a little help with responsive CSS (flex boxes), and images that I need to rotate using only CSS.
I have created two pens so you can see my problem.
The first is similar to how I want the final product to look, and what is running on my current site. The flexboxes are responsive and resizing properly, and the pictures and background image/colors are where I want them, and the text is centering vertically and horizontally as it should.
https://codepen.io/hmhaley/pen/xMBvJo
Here's the HTML that's working as expected (though I probably have extra layers of divs I don't need):
<div class="boxTable">
<div class="boxBody">
<div class="boxRow">
<div class="boxCell firstBox">
<div class="boxImage"><img class="bottom" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_1.jpg">
</div>
</div>
<div class="boxCell secondBox">
<div class="boxText" style="color: #ffffff; background-image: url(https://www.thereconnection.com/sites/default/files/ps_f4/ps_f4/background.jpg);">
<div class="textFormat">EXPAND YOUR POSSIBILITIES
</div>
</div>
</div>
<div class="boxCell thirdBox">
<div class="boxText" style="color: #ffffff; background-color: #ffffff;">
<div class="textFormat" style="color: #999999">ACHIEVE A HIGHER LEVEL OF CONNECTION WITH OTHERS
</div>
</div>
</div>
<div class="boxCell fourthBox"><img src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_2-f1.png">
</div>
</div>
</div>
</div>
And the CSS that's working that goes with the HTML above (though I may have some extra classes I don't need):
body {
background-color: white;
}
.boxTable {
display: table;
width: 100%;
}
.boxBody {
display: table-row-group;
}
.boxRow {
display: flex;
flex-flow: row wrap;
width: 100%;
min-height: 200px;
}
.boxCell {
border: 0px solid #999999;
padding: 0px 0px;
width: 50%;
}
.boxCell img {
width: 100%;
height: auto;
display: flex;
}
.boxText {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.textFormat {
margin: 0;
padding: 0;
text-align: center;
font-weight: bold;
font-size: 2vw;
}
Then my boss asked that each image cross-fade on a timer, so that two different pictures rotate back and forth in every other box. I got that feature to successfully work, but then it messes up my responsive flexboxes. I can't figure out how to do both together. I would use Javascript, and try it that way... but we do not have access to add javascript scripts inside our CMS right now (Drupal). So, I need to make this happen with only CSS/HTML.
https://codepen.io/hmhaley/pen/WPmVyX
Here's the HTML for what's not working (the boxes are not lining-up/stretching/responding as before, though the fade is working):
<div class="boxTable">
<div class="boxBody">
<div class="boxRow">
<div class="boxCell firstBox">
<div class="boxImage"><img class="bottom" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_1.jpg"><img class="top" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_2-f1.png"></div>
</div>
<div class="boxCell secondBox">
<div class="boxText" style="color: #ffffff; background-image: url(https://www.thereconnection.com/sites/default/files/ps_f4/ps_f4/background.jpg);">
<div class="textFormat">EXPAND YOUR POSSIBILITIES
</div>
</div>
</div>
<div class="boxCell thirdBox">
<div class="boxText" style="color: #ffffff; background-color: #ffffff;">
<div class="textFormat" style="color: #999999">BECOME CERTIFIED IN RECONNECTIVE HEALING®
</div>
</div>
</div>
<div class="boxCell firstBox">
<div class="boxImage"><img class="bottom" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_2-f1.png"><img class="top" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_1.jpg"></div>
</div>
</div>
</div>
</div>
And here's the matching CSS for what's not working that goes with the HTML above:
body {
background-color: white;
}
.boxTable {
display: table;
width: 100%;
}
.boxBody {
display: table-row-group;
}
.boxRow {
display: flex;
flex-flow: row wrap;
width: 100%;
min-height: 200px;
}
.boxCell {
border: 0px solid #999999;
padding: 0px 0px;
width: 50%;
}
.boxCell img {
width: 100%;
height: auto;
display: flex;
}
.boxText {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.textFormat {
margin: 0;
padding: 0;
text-align: center;
font-weight: bold;
font-size: 2vw;
}
.boxImage {
position: relative;
margin: 0 auto;
}
.boxImage img {
position: absolute;
left: 0;
width: 100%;
height: auto;
display: flex;
}
.boxImage > img.top {
animation-name: fade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
}
#keyframes fade {
0% {
opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}
Can someone help me figure out what changes to make to the CSS to have these boxes maintain their size/height, and responsiveness (like on the first codepen), but have the pictures crossfade in and out (like on the second codepen)?
I'm only a baby coder, and more of a Sr product manager and operations guy in real-life, so this has been kicking my butt for days. I just can't figure it out at this point, and I need to give up and ask for a little help. The pens above are just a sample of the code I'm using on a fairly complex single-page "landing page" with a lot of different formats... but it's the section of that page I am struggling with... so, I've pulled it out and re-created it in codepen for the sake of getting some help. It's my first post on StackOverflow so, go easy on me if I'm not posting this properly. :-)
And, thank you, in advance, to anyone that has a few minutes to look at this and give some advice.
I have used slick_slider to make this.
Also I have attached slick-theme.min.css , slick.min.css , jquery-3.3.1.min.js and slick.min.js
I hope this will help you.
$(document).ready(function() {
$('.boxImage').slick({
dots: false,
infinite: true,
speed: 2000,
autoplaySpeed:2000,
fade: true,
cssEase: 'linear',
autoplay: true,
arrows:false,
pauseOnFocus:false,
pauseOnHover:false
});
});
body {
background-color: white;
}
.boxTable {
display: table;
width: 100%;
}
.boxBody {
display: table-row-group;
}
.boxRow {
display: flex;
flex-flow: row wrap;
width: 100%;
min-height: 200px;
}
.boxCell {
border: 0px solid #999999;
padding: 0px 0px;
width: 50%;
}
.boxCell img {
width: 100%;
height: auto;
display: flex;
display: block !important;
}
.boxText {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.textFormat {
margin: 0;
padding: 0;
text-align: center;
font-weight: bold;
font-size: 2vw;
}
.boxImage {
position: relative;
margin: 0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<div class="boxTable">
<div class="boxBody">
<div class="boxRow">
<div class="boxCell firstBox">
<div class="boxImage slide-one">
<img class="bottom" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_1.jpg">
<img class="top" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_2-f1.png">
</div>
</div>
<div class="boxCell">
<div class="boxText" style="color: #ffffff; background-image: url(https://www.thereconnection.com/sites/default/files/ps_f4/ps_f4/background.jpg);">
<div class="textFormat">EXPAND YOUR POSSIBILITIES
</div>
</div>
</div>
<div class="boxCell thirdBox">
<div class="boxText" style="color: #ffffff; background-color: #ffffff;">
<div class="textFormat" style="color: #999999">BECOME CERTIFIED IN RECONNECTIVE HEALING®
</div>
</div>
</div>
<div class="boxCell firstBox">
<div class="boxImage">
<img class="bottom" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_2-f1.png">
<img class="top" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_1.jpg">
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
MWE:
https://jsfiddle.net/zjgc9dfx/
Suppose I've got this layout:
<div class="slider">
<span>button here</span>
<div class="slide">
<img src="https://loremflickr.com/1000/1000" alt="Bacn">
</div>
<span>button here</span>
</div>
The slider is a flex container. The two buttons are inline-block, and I want the slide img to be limited to the viewport's height without extra space.
How can I achieve this?
* {
margin: 0;
padding: 0;
}
.slider {
display: flex;
justify-content: center;
align-items: center;
background-color: red;
}
.slider .slide img {
width: 100%;
max-height: 100%;
}
<div class="slider">
<span>asd</span>
<div class="slide">
<img src="https://loremflickr.com/1000/1000" alt="Bacn">
</div>
<span>asd</span>
</div>
Maybe something like this will work:
.slider {
display: flex;
align-items: center;
height: 100vh;
background-color: red;
}
.slider>span {
flex-shrink: 0; /* disables shrinking feature */
}
.slider>.slide {
flex: 1; /* consume all free space */
height: 100%;
}
.slider .slide img {
width: 100%;
max-height: 100%;
object-fit: cover;
vertical-align: bottom; /* https://stackoverflow.com/a/31445364/3597276 */
}
* {
margin: 0;
padding: 0;
}
<div class="slider">
<span>button here</span>
<div class="slide">
<img src="https://loremflickr.com/1000/1000" alt="Bacn">
</div>
<span>button here</span>
</div>
jsFiddle demo
I have a pay layout which works how I want to when using the .slides element has a background colour and height, it flexes as expected, however when I switch to filling it with an image this behaviour breaks as the images won't resize and I can't get my head around how to make them resize.
The idea is the left column of text remains fixed size, and the right column flexes up and down, eventually snapping under the left column at small sizes.
The reason for using an <img> and not a background image is because there is a image slide show that I want to put in here.
Can anyone help fix this issue?
body {
margin: 1em;
}
p {
margin: 0;
}
.container {
display: flex;
margin-top: 1em;
width: 100%;
flex-wrap: wrap;
}
.text {
flex: 0 0 auto;
width: 15em;
margin-right: 1em;
}
.images {
flex: 1 1 auto;
min-width: 15em;
max-width: 800px;
}
.caption {
margin-top: .25em;
}
<div class="header">
Title
</div>
<div class="container">
<div class="text">
<p>Something about this project is really interesting.</p>
</div>
<div class="images">
<div class="slides">
<img src="https://via.placeholder.com/800x800">
</div>
<div class="caption">
<p>Text about this project</p>
</div>
</div>
</div>
Changes made:
Enabled responsiveness for img elements
Commented out the flex-wrap: wrap
Set #media queries to define when the wrapping inside the .container div takes place
body {
margin: 1em;
}
p {
margin: 0;
}
img {
display: block; /* removes bottom margin/whitespace */
max-width: 100%; /* horizontally responsive */
max-height: 100vh; /* vertically responsive */
}
.container {
display: flex;
margin-top: 1em;
width: 100%;
/*flex-wrap: wrap;*/
}
.text {
flex: 0 0 auto;
width: 15em;
margin-right: 1em;
}
.images {
flex: 1 1 auto;
min-width: 15em;
max-width: 800px;
}
.caption {
margin-top: .25em;
}
#media (max-width: 33em) { /* 2 x 15em (.text & .images) + 2em (left & right margin of the body element) + 1em (.text margin-right) */
.container {flex-wrap: wrap}
}
<div class="header">
Title
</div>
<div class="container">
<div class="text">
<p>Something about this project is really interesting.</p>
</div>
<div class="images">
<div class="slides">
<img src="https://via.placeholder.com/800x800">
</div>
<div class="caption">
<p>Text about this project</p>
</div>
</div>
</div>
Do you mean something like this ?
body {
margin: 1em;
}
p {
margin: 0;
}
.container {
display: flex;
margin-top: 1em;
width: 100%;
flex-flow:row wrap;
}
.text {
flex: 0 0 auto;
width: 15em;
margin-right: 1em;
}
.images {
flex:1 0 15em;
min-width: 15em;
max-width:800px;
}
.slides {
display:flex;
}
.caption {
margin-top: .25em;
}
<div class="header">
Title
</div>
<div class="container">
<div class="text">
<p>Something about this project is really interesting.</p>
</div>
<div class="images">
<div class="slides">
<img src="https://via.placeholder.com/800x800" />
</div>
<div class="caption">
<p>Text about this project</p>
</div>
</div>
</div>
I am unable to get one of my images to line up correctly. I have done most of the align vertical-align: middle; and display display: block;options to remove the bottom padding. I have also set the container to width: 100%; as well as the image width: 100%; so it should be responsive. I'm not sure what is causing this image to have the gap. I have set the background color to yellow so it shows the area that needs to be filled in. I have also commented out all of the alternative options I attempted with no success.
Example:
* {
box-sizing: border-box;
font-size: 100%;
}
.container {
display: flex;
flex-direction: column;
max-width: 90%;
margin: 0 auto;
background-color: white;
}
.img__container {
display: flex;
/* justify-content: space-between; */
align-content: center;
background: yellow;
}
a .img_item {
width: 100%;
height: auto;
vertical-align: middle;
/* display: block; */
/* flex-grow: 1;
flex-shrink: 0;
flex-basis: auto; */
}
.img_item_1,
.img_item_3,
.img_item_2 {
width: 33.33%;
}
.img_item_4,
.img_item_5 {
width: 50%;
}
.img_item img {
vertical-align: middle;
/* display: block; */
max-width: 100%;
}
<div class="container">
<div class="img__container">
<img src="https://images.unsplash.com/photo-1460626399219-57a00a2361cb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=ea8025ac5c503a77aaf3197534af535b" alt="">
<img src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=65ebb274e22b4db0f6cef789563020c5" alt="">
<img src="https://images.unsplash.com/photo-1453668069544-b8dbea7a0477?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=3693c161a8cf1e3299c913eede08005a" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1428189923803-e9801d464d76?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=467ee7b8a091aa5cb8bc9b496aada853" alt="">
<img src="https://images.unsplash.com/photo-1458724338480-79bc7a8352e4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0e8fe82e7f50091319fdc635582bf62d" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1421749810611-438cc492b581?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=072549d9d9ee6a1f78d91081068c6ad1" alt="">
<img src="https://images.unsplash.com/photo-1433190152045-5a94184895da?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=57115141c5d099ff83a0aa55c0b219a9" alt="">
</div>
</div>
The problem is you're trying to fit images of different width to height ratios into boxes of the same size (I say images because it also appears your first top two images have a 1 pixel gap at the bottom.)
Your options are:
Crop all images to the same size at the CMS end.
or
Attach your images as inline background images and in your CSS file set the background-size to cover and background-position to center center. Some other things you'll need to adjust as well. If you're interested in this approach, let me know in the comments and I can edit my answer with a snippet.
EDIT
Background image (for the sake of brevity I only did the one):
* {
box-sizing: border-box;
font-size: 100%;
}
.container {
display: flex;
flex-direction: column;
max-width: 90%;
margin: 0 auto;
background-color: white;
}
.img__container {
display: flex;
align-content: center;
background: yellow;
}
.img_item {
background-size: cover;
background-position: center center;
}
.img_item_4,
.img_item_5 {
width: 50%;
}
.img_item img {
vertical-align: middle;
max-width: 100%;
}
<div class="container">
<div class="img__container">
<img src="https://images.unsplash.com/photo-1460626399219-57a00a2361cb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=ea8025ac5c503a77aaf3197534af535b" alt="">
<img src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=65ebb274e22b4db0f6cef789563020c5" alt="">
<img src="https://images.unsplash.com/photo-1453668069544-b8dbea7a0477?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=3693c161a8cf1e3299c913eede08005a" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1458724338480-79bc7a8352e4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0e8fe82e7f50091319fdc635582bf62d" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1421749810611-438cc492b581?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=072549d9d9ee6a1f78d91081068c6ad1" alt="">
<img src="https://images.unsplash.com/photo-1433190152045-5a94184895da?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=57115141c5d099ff83a0aa55c0b219a9" alt="">
</div>
</div>
EDIT 2
* {
box-sizing: border-box;
font-size: 100%;
}
.container {
display: flex;
flex-direction: column;
max-width: 90%;
margin: 0 auto;
background-color: white;
}
.img__container {
display: flex;
align-content: center;
background: yellow;
}
.img_item {
background-size: cover;
background-position: center center;
}
.img_item_1,
.img_item_2,
.img_item_3 {
padding-bottom: 22%;
width: 33.333%;
}
.img_item_4,
.img_item_5,
.img_item_6,
.img_item_7 {
padding-bottom: 33.333%;
width: 50%;
}
.img_item img {
vertical-align: middle;
max-width: 100%;
}
<div class="container">
<div class="img__container">
</div>
<div class="img__container">
</div>
<div class="img__container">
</div>
</div>