I'm trying to center vertically .container img:nth-child(2) to its siblings height but it just doesn't work. I tried to center it vertically with a lot of commands (and adding it to both - .container and .child) but nothing happened.
Also, when the window is scaled down, I want the first .container img child to be centered and above the second one. The whole container should also be horizontally aligned to the center of browser windows width (screenshot attached).
Is it possible without using media queries? Could you guys help me out? I'm a beginner and I'm really trying to figure those displays and positioning out...
body {
margin: 0;
}
.parent {
background-image:url("http://bossfight.co/wp-content/uploads/2016/04/boss-fight-free-high-quality-stock-images-photos-photography-trees-forest-mist.jpg");
background-size: cover;
flex-wrap: wrap;
height: 100vh;
position: relative;
}
.parent h1 {
margin-top:0;
padding-top: 2em;
text-align: center;
font-family: helvetica;
}
.container {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
position: absolute;
bottom: 2em;
width: 100%;
}
.child {
display: inline-flex;
padding: 0 5px;
}
.container img {
float: left;
}
.container a {
opacity: 0.5;
}
.container a:hover {
opacity: 1;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>random title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="parent">
<h1>Heading example</h1>
<div class="container">
<div class="child">
<a href="_top">
<img src="http://placehold.it/90x90" alt="ux-button">
<img src="http://placehold.it/150x40" alt="ux-button">
</a>
</div>
<div class="child">
<a href="_top">
<img src="http://placehold.it/90x90" alt="ux-button">
<img src="http://placehold.it/150x40" alt="ux-button">
</a>
</div>
<div class="child">
<a href="_top">
<img src="http://placehold.it/90x90" alt="ux-button">
<img src="http://placehold.it/150x40" alt="ux-button">
</a>
</div>
</div>
</body>
</html>
You can use nested flexbox with media queries.
Make each anchor link as flexbox.
.container a {
display: flex;
align-items: center;
justify-content: center;
}
Switch flex-direction value in the media queries.
#media (max-width: 768px) {
.container a {
flex-direction: column;
}
}
body {
margin: 0;
}
.parent {
background-image: url("http://bossfight.co/wp-content/uploads/2016/04/boss-fight-free-high-quality-stock-images-photos-photography-trees-forest-mist.jpg");
background-size: cover;
flex-wrap: wrap;
height: 100vh;
position: relative;
}
.parent h1 {
margin-top: 0;
padding-top: 2em;
text-align: center;
font-family: helvetica;
}
.container {
display: flex;
align-items: center;
justify-content: center;
/* align-content: center; */
position: absolute;
bottom: 2em;
width: 100%;
}
.child {
padding: 0 5px;
}
.container img {
/* float: left; */
}
.container a {
opacity: 0.5;
display: flex;
align-items: center;
justify-content: center;
}
.container a:hover {
opacity: 1;
}
#media (max-width: 768px) {
.container a {
flex-direction: column;
}
}
<div class="parent">
<h1>Heading example</h1>
<div class="container">
<div class="child">
<a href="_top">
<img src="http://placehold.it/90x90" alt="ux-button">
<img src="http://placehold.it/150x40" alt="ux-button">
</a>
</div>
<div class="child">
<a href="_top">
<img src="http://placehold.it/90x90" alt="ux-button">
<img src="http://placehold.it/150x40" alt="ux-button">
</a>
</div>
<div class="child">
<a href="_top">
<img src="http://placehold.it/90x90" alt="ux-button">
<img src="http://placehold.it/150x40" alt="ux-button">
</a>
</div>
</div>
Make your have display:flex; justify-content:center; flex-direction:row
and have the be flex: 0 1 auto; align-self: center;
body {
margin: 0;
}
.parent {
background-image:url("http://bossfight.co/wp-content/uploads/2016/04/boss-fight-free-high-quality-stock-images-photos-photography-trees-forest-mist.jpg");
background-size: cover;
flex-wrap: wrap;
height: 100vh;
position: relative;
}
.parent h1 {
margin-top:0;
padding-top: 2em;
text-align: center;
font-family: helvetica;
}
.container {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
position: absolute;
bottom: 2em;
width: 100%;
}
.child {
display: inline-flex;
padding: 0 5px;
}
.child>a{
display:flex;
flex-direction: row;
justify-content:center;
}
.child>a>img{
flex:0 1 auto;
align-self:center
}
.container img {
float: left;
}
.container a {
opacity: 0.5;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>random title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="parent">
<h1>Heading example</h1>
<div class="container">
<div class="child">
<a href="_top">
<img src="http://placehold.it/90x90" alt="ux-button">
<img src="http://placehold.it/150x40" alt="ux-button">
</a>
</div>
<div class="child">
<a href="_top">
<img src="http://placehold.it/90x90" alt="ux-button">
<img src="http://placehold.it/150x40" alt="ux-button">
</a>
</div>
<div class="child">
<a href="_top">
<img src="http://placehold.it/90x90" alt="ux-button">
<img src="http://placehold.it/150x40" alt="ux-button">
</a>
</div>
</div>
</body>
</html>
Related
the section #portfolio slips under the section #team-container when resizing the page to a smaller width
the website should show up like this: https://content.codecademy.com/PRO/independent-practice-projects/flexbox-business-site/example-site/index.html#team
Despite that what would you do to make the code better?
HTML:
<html><head>
<title>VC Enterprise Portfolio</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<link rel="shortcut icon" href="/tiefes-lernen.png" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Lexend+Mega" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header">
<h1>The VC Experience</h1>
<div class="navbar">
<p>Mission Statement</p>
<p>Portfolio</p>
<p>Investment Team</p>
</div>
</div>
<div class="main">
<div class="mission">
<div class="content">
<h2>The VC Experience</h2>
<h4>Our fund is committed to the furthering entrepreneurs in the mobility sector.</h4>
</div>
</div>
<div id="portfolio">
<div class="content">
<h2>Our Mobility Portfolio</h2>
<h4>Impacting diverse sectors of mobility to better the human experience and the world we inhabit</h4>
<div class="companies">
<div class="company">
<img src="img URL">
<span>AeroArgonauts</span>
</div>
<div class="company">
<img src="img URL">
<span>AutoBueno</span>
</div>
<div class="company">
<img src="img URL">
<span>LaneChatter</span>
</div>
<div class="company">
<img src="img URL">
<span>TigerTreads</span>
</div>
<div class="company">
<img src="img URL">
<span>ValetToday</span>
</div>
</div>
</div>
</div>
<div id="team-container">
<h2>Our Team</h2>
<div class="team">
<div class="teammate">
<img src="img URL">
<h3>Lisa Fischer</h3>
<p>C.E.O. - Founder and Principal Investor</p>
</div>
<div class="teammate">
<img src="img URL">
<h3>Alex Lasker</h3>
<p>Partner - Research & Development</p>
</div>
<div class="teammate">
<img src="img URL">
<h3>Omar Carlsen</h3>
<p>Partner - Partnerships & Marketing</p>
</div>
</div>
</div>
<div class="contact">
<h2>The VC Experience</h2>
<h5>introduction#vcexperience.investors</h5>
<h5>555-867-5309</h5>
</div>
<div class="copyright">
<h5>copyright VC Enterprises 2020</h5>
</div>
</div>
</body></html>
CSS:
/*https://content.codecademy.com/PRO/independent-practice-projects/flexbox-business-site/img/skyscrapers.jpg*/
html {
display: block;
}
body {
font-family: "Lexend Mega", sans-serif;
}
h1 {
display: block;
margin-top: .75em;
font-size: 2.75rem;
}
.navbar {
display: flex;
justify-content: space-around;
font-size: 1.375rem;
margin: 0 10%;
}
.navbar p{
padding: 0 15px 10px 30px;
display: inline-block;
}
a {
color: black;
}
header {
display: flex;
flex-direction: column;
align-items: center;
}
body {
text-align: center;
}
.navbar {
justify-content: space-around;
margin: 0 10px;
display: flex;
}
.mission {
display: flex;
background-image: img URL;
width: auto;
padding-top: 10px;
}
.content {
display: block;
width: 100%;
height: 300px;
position: relative;
top: 80px;
margin-bottom: 0;
}
h2, h4 {
background-color: white;
position: relative;
font-size: 33px;
margin: 0;
padding: 10px;
}
h4 {
font-size: 22px;
}
#portfolio {
min-height: 500px;
margin: auto;
padding-top: 35px;
}
.company {
display: flex;
align-items: center;
justify-content: space-between;
}
.company img {
width: 200px;
height: auto;
padding: 10px;
margin-left: auto;
margin-right: auto;
}
span {
min-width: 240px;
padding: 5px;
text-align: center;
font-size: 22px;
font-weight: bold;
}
.companies {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
#team-container {
position: relative;
display: block;
}
#team-container h2 {
margin: 0;
padding: 5px;
display: block;
}
.team {
padding-top: 75px;
justify-content: center;
display: flex;
flex-wrap: wrap;
background-image: img URL;
}
.team img {
padding: 10px;
height : 300px;
width: 200px;
}
.teammate {
padding: 5px;
color: white;
flex-basis: 280px;
}
Tried to make some paddings to top or bottom but it looks whacky. I also tried to inspect the original site but can't find the reason why.
import "./portfolio.scss"
export default function portfolio() {
return (
<div className="portfolio" id="portfolio">
<h1>Portfolio</h1>
<ul>
<li className="active">Featured</li>
<li>Web app</li>
<li>Mobile app</li>
<li>Design</li>
<li>Branding</li>
</ul>
<div className="container">
<div className="item">
<img
src="assets/default-product-image.png"
alt="" />
<h3>Coming soon</h3>
</div>
<div className="container">
<div className="item">
<img
src="assets/default-product-image.png"
alt=""/>
<h3>Coming soon</h3>
</div>
<div className="container">
<div className="item">
<img
src="assets/default-product-image.png"
alt=""/>
<h3>Coming soon</h3>
</div>
</div>
</div>
</div>
</div>
)
}
This is my .jsx I am making div's with containers in them and the containers seem to not be aligned properly, see the picture below.
I am trying to get them all aligned with even margin but the third one seems to be off, when i change the device on which i view it tho they align perfectly below each other.
and this is my scss
#import "../../global.scss";
.portfolio{
background-color: lightblue;
display: flex;
flex-direction: column;
align-items: center;
h1{
font-style: 500px;
}
ul{
margin: 10px;
padding: 0;
list-style: none;
display: flex;
li{
font-size: 14px;
margin-right: 9px;
padding: 7px;
border-radius: 10px;
cursor: pointer;
&.active{
background-color: $mainColor;
color: white;
}
}
}
.container{
width: 70%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
.item{
width: 220px;
height: 150px;
border-radius: 20px;
border: 1px solid rgb(240, 234, 234);
margin: 10px 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
position: relative;
h3{
position: absolute;
font-style: 20px;
}
img{
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
&:hover{
background-color: $mainColor;
img{
opacity: 0;
z-index: 0;
}
}
}
}
}
This is what it looks like right now I want the items to be evenly spread apart.
The way you have the <div class='container'>s nested is probably what is causing misalignment. I don't see any images in your question, but I'm willing to bet your code is producing containers that get smaller and smaller the further down the tree it gets, which is exaggerated on small screens.
Start by closing your container divs before opening another. Also, use consistent indentation - that will help make this issue more obvious when you're reading your code. I have cleaned up your code and changed nothing except the HTML markup. The top example in the linked pen has cleaned up markup, while the bottom example has the containers grouped.
https://codepen.io/the_Northway/pen/QWqapbg?editors=1100
.portfolio {
background-color: lightblue;
display: flex;
flex-direction: column;
align-items: center;
}
.portfolio#portfolio_fixed {
background-color: orange;
}
.portfolio h1 {
font-style: 500px;
}
.portfolio ul {
margin: 10px;
padding: 0;
list-style: none;
display: flex;
}
.portfolio ul li {
font-size: 14px;
margin-right: 9px;
padding: 7px;
border-radius: 10px;
cursor: pointer;
}
.portfolio ul li.active {
background-color: #445566;
color: white;
}
.portfolio .container {
width: 70%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.portfolio .container .item {
width: 220px;
height: 150px;
border-radius: 20px;
border: 1px solid #f0eaea;
margin: 10px 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
position: relative;
}
.portfolio .container .item h3 {
position: absolute;
font-style: 20px;
}
.portfolio .container .item img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: 1;
}
.portfolio .container .item:hover {
background-color: #445566;
}
.portfolio .container .item:hover img {
opacity: 0;
z-index: 0;
}
<div class="portfolio" id="portfolio_fixed">
<h1>Portfolio</h1>
<ul>
<li class="active">Featured</li>
<li>Web app</li>
<li>Mobile app</li>
<li>Design</li>
<li>Branding</li>
</ul>
<div class="container">
<div class="item">
<img src="assets/default-product-image.png" alt="" />
<h3>Coming soon</h3>
</div>
</div>
<div class="container">
<div class="item">
<img src="assets/default-product-image.png" alt=""/>
<h3>Coming soon</h3>
</div>
</div>
<div class="container">
<div class="item">
<img src="assets/default-product-image.png" alt=""/>
<h3>Coming soon</h3>
</div>
</div>
</div>
<div class="portfolio" id="portfolio_broken">
<h1>Portfolio</h1>
<ul>
<li class="active">Featured</li>
<li>Web app</li>
<li>Mobile app</li>
<li>Design</li>
<li>Branding</li>
</ul>
<div class="container">
<div class="item">
<img src="assets/default-product-image.png" alt="" />
<h3>Coming soon</h3>
</div>
<div class="container">
<div class="item">
<img src="assets/default-product-image.png" alt=""/>
<h3>Coming soon</h3>
</div>
<div class="container">
<div class="item">
<img src="assets/default-product-image.png" alt=""/>
<h3>Coming soon</h3>
</div>
</div>
</div>
</div>
</div>
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Closed 5 years ago.
Basically screen is split in 2 part, left for logo, right for sponsor image.
I would like to vertical align the two image in center of screen. Now images are align on top of screen. I don't understand how to solve. Can you give some hint?
#logo {
float:left;
width: 50%;
height:100%;
}
#imgLogo {
height:100%;
}
#sponsor {
float:left;
width: 50%;
height:100%;
background:#ffffff;
display: inline-block;
vertical-align: middle;
}
#imgSponsor {
max-height:90%;
max-width:90%;
display: inline-block;
vertical-align: middle;
}
.app {
position:absolute;
left:0%;
top:0%;
height:100%;
width:100%;
text-align:center;
}
<div class="app">
<div id="logo">
<img id="imgLogo" src="logo.png">
</div>
<div id="sponsor">
<a href="#">
<img id="imgSponsor" src="http://www.foo.bar/wp-content/uploads/2017/10/foobar.jpg">
</a>
</div>
</div>
Here is a way you could approach your layout using flexbox:
body {
margin: 0;
}
.app {
display: flex;
align-items: center;
height: 100vh;
}
.app div {
flex: 1;
}
img {
width: 100%;
height: auto;
}
<div class="app">
<div id="logo">
<img id="imgLogo" src="https://unsplash.it/200x200">
</div>
<div id="sponsor">
<a href="#">
<img id="imgSponsor" src="https://unsplash.it/200x200">
</a>
</div>
</div>
You can use these 2 in your code which will center-center your image.
#logo {
float:left;
width: 50%;
height:100%;
}
#imgLogo {
height:100%;
}
#sponsor {
float:left;
width: 50%;
height:100%;
background:#ffffff;
display: inline-block;
vertical-align: middle;
text-align: center;
}
#imgSponsor {
max-height:90%;
max-width:90%;
display: inline-block;
vertical-align: middle;
}
.app {
position:absolute;
left:0%;
top:0%;
height:100%;
width:100%;
text-align:center;
}
<div class="app">
<div id="logo">
<img id="imgLogo" src="logo.png">
</div>
<div id="sponsor">
<a href="#">
<img id="imgSponsor" src="http://www.foo.bar/wp-content/uploads/2017/10/foobar.jpg">
</a>
</div>
</div>
or you can use:
background-position: center center:
That is where CSS flex comes very handy:
body {
margin: 0;
}
.app {
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: space-around;
}
#sponsor, #logo {
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#imgLogo {
height: 100%;
}
#imgSponsor {
max-height:90%;
max-width:90%;
}
#sponsor a {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
<div class="app">
<div id="logo">
<img id="imgLogo" src="https://placehold.it/200x200">
</div>
<div id="sponsor">
<a href="#">
<img id="imgSponsor" src="https://placehold.it/200x200">
</a>
</div>
</div>
I am trying to align h2 to the left and edit to the right using flex-box. I followed the approach here and used justify-content property but still no success. Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
.ReviewBlock__Main {
display: flex;
flex-direction: column;
justify-content: center;
line-height: normal;
max-width: 70rem;
margin: 5rem auto;
}
#media screen and (min-width: 640px) {
.ReviewBlock__Main {
flex-direction: row;
}
}
.ReviewBlock__Main__Section {
border-style: solid;
border-width: 1px;
display: flex;
flex-wrap: wrap;
margin: auto;
padding: 10px;
width: 95%;
display: flex;
}
#media screen and (min-width: 640px) {
.ReviewBlock__Main__Section {
width: 33%;
margin: 10px;
padding: 10px;
}
}
.ReviewBlock__Main__Section__TitleBlock {
display: flex;
justify-content: space-between;
}
.ReviewBlock__Main__Section__TitleBlock__Title {
font-weight: bold;
margin: 5px auto 15px 15px;
}
.ReviewBlock__Main__Section__TitleBlock__Edit {
margin: auto;
}
</style>
</head>
<body>
<div class="ReviewBlock">
<div class="ReviewBlock__Main">
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Shipping information</h2>
<a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a>
</span>
</div>
</section>
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Billing information</h2>
<a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a>
</span>
</div>
</section>
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Order Summary</h2>
</span>
</div>
</section>
</div>
</body>
</html>
You have to give your div in the section width: 100%.
.ReviewBlock__Main {
display: flex;
flex-direction: column;
justify-content: center;
line-height: normal;
max-width: 70rem;
margin: 5rem auto;
}
#media screen and (min-width: 640px) {
.ReviewBlock__Main {
flex-direction: row;
}
}
.ReviewBlock__Main__Section {
border-style: solid;
border-width: 1px;
display: flex;
flex-wrap: wrap;
margin: auto;
padding: 10px;
width: 95%;
display: flex;
}
#media screen and (min-width: 640px) {
.ReviewBlock__Main__Section {
width: 50%;
margin: 10px;
padding: 10px;
}
}
.ReviewBlock__Main__Section__TitleBlock {
display: flex;
justify-content: space-between;
}
.ReviewBlock__Main__Section > div {
width: 100%;
}
.ReviewBlock__Main__Section__TitleBlock__Title {
font-weight: bold;
margin: 5px auto 15px 15px;
}
.ReviewBlock__Main__Section__TitleBlock__Edit {
margin: auto;
}
<div class="ReviewBlock">
<div class="ReviewBlock__Main">
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Shipping information</h2>
<a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a>
</span>
</div>
</section>
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Billing information</h2>
<a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a>
</span>
</div>
</section>
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Order Summary</h2>
</span>
</div>
</section>
</div>
I'm trying to build a simple teaser grid for featured posts on a website using flexbox. It should look like this:
And in FF and Chrome it's all good. If i change the resolution of one image, all the others follow and update their size. But not in Safari. Whatever i do, it never fits to an equal height:
I really don't get the point why this is happening. Each image container on the right has exactly 50% of the height calculated by flexbox. And each image should be stretched to that height.
I could probably achieve this with background-size:cover but i would love to find a solution to use img tags instead.
Here's a demo: https://jsfiddle.net/7tjw8j83/1/
.featured-grid{
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
img{
width: 100%;
height: 100%;
display: block;
object-fit:cover;
}
.left{
width: 66.6666%;
}
.right{
width: 33.3333%;
display: flex;
flex-direction: column;
}
.right-top{
background: green;
flex: 1;
}
.right-bottom{
background: red;
flex: 1;
}
<div class="featured-grid">
<div class="left">
<img src="https://unsplash.it/600/450?image=1055">
</div>
<div class="right">
<div class="right-top">
<img src="https://unsplash.it/600/400?image=1051">
</div>
<div class="right-bottom">
<img src="https://unsplash.it/600/400?image=1057">
</div>
</div>
</div>
In addition to Michaels suggestion, you could do like this, where I used background-image instead of img (since you use a given height anyway), and how to add text at an absolute position
html, body {
margin: 0;
}
.featured-grid{
display: flex;
height: 100vh;
}
div {
position: relative;
background-position: center;
background-repeat: no-reapat;
background-size: cover;
overflow: hidden;
}
.left {
width: 66.666%;
}
.right{
width: 33.333%;
display: flex;
flex-direction: column;
}
.right-top{
flex: 1;
}
.right-bottom{
flex: 1;
}
.text {
position: absolute;
left: 10px;
bottom: 10px;
color: white;
}
.text > * {
margin: 5px;
}
<div class="featured-grid">
<div class="left" style="background-image: url(https://unsplash.it/600/450?image=1055)">
<div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
<div class="right">
<div class="right-top" style="background-image: url(https://unsplash.it/600/400?image=1051)">
<div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
<div class="right-bottom" style="background-image: url(https://unsplash.it/600/400?image=1057)">
<div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
</div>
</div>
Updated based on a comment
html, body {
margin: 0;
}
.featured-grid{
display: flex;
height: 100vh;
}
div {
position: relative;
overflow: hidden;
}
img{
width: 100%;
height: 100%;
display: block;
object-fit:cover;
}
.left {
width: 66.666%;
}
.right{
width: 33.333%;
display: flex;
flex-direction: column;
}
.right-top{
flex: 1;
}
.right-bottom{
flex: 1;
}
.text {
position: absolute;
left: 10px;
bottom: 10px;
color: white;
}
.text > * {
margin: 5px;
}
<div class="featured-grid">
<div class="left">
<img src="https://unsplash.it/600/450?image=1055">
<div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
<div class="right">
<div class="right-top">
<img src="https://unsplash.it/600/400?image=1051">
<div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
<div class="right-bottom">
<img src="https://unsplash.it/600/400?image=1057"> <div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
</div>
</div>
Updated (2:nd) based on a comment
html,
body {
margin: 0;
}
.featured-grid {
display: flex;
}
div {
position: relative;
overflow: hidden;
}
img {
visibility: hidden;
display: block;
}
img.show {
position: absolute;
visibility: visible;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.left img {
max-height: 100vh;
}
.right img {
max-height: 50vh;
}
.left {
width: 66.666%;
}
.right {
width: 33.333%;
display: flex;
flex-direction: column;
}
.right-top {
flex: 1;
}
.right-bottom {
flex: 1;
}
.text {
position: absolute;
left: 10px;
bottom: 10px;
color: white;
}
.text > * {
margin: 5px;
}
<div class="featured-grid">
<div class="left">
<img src="https://unsplash.it/300/250?image=1055">
<img class="show" src="https://unsplash.it/300/250?image=1055">
<div class="text">
<h2>Title 1</h2>
<h3>Text 1</h3>
</div>
</div>
<div class="right">
<div class="right-top">
<img src="https://unsplash.it/300/200?image=1057">
<img class="show" src="https://unsplash.it/300/200?image=1057">
<div class="text">
<h2>Title 2</h2>
<h3>Text 2</h3>
</div>
</div>
<div class="right-bottom">
<img src="https://unsplash.it/300/200?image=1057">
<img class="show" src="https://unsplash.it/300/200?image=1057">
<div class="text">
<h2>Title 3</h2>
<h3>Text 3</h3>
</div>
</div>
</div>
</div>