• Locked
No replies
Mon, 2019-08-19 10:08
Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 3 years 1 week ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Hello

I have this CSS:

.container {
 
display:flex;
 
flex-direction:row;
 
flex-wrap:wrap;
 
align-items:center;
 
justify-content: center;
 
}
 
 
a.gallery {
 
margin:5px;
 
padding:5px;
 
background:#fff;
 
 
border-radius:5%;
 
box-shadow:5px 5px 5px 5px white inset;
 
 
}
 
 
a.gallery:hover {
 
transition:all .3s;
 
transform:scale(1.1);
 
}
 
 
a.gallery img {
 
height:150px;
 
}
 
 
 
a.custom {
 
display:inline-block;
 
padding:5px;
 
color:#fff;
 
background:#000;
 
border:1px solid #fff;
 
box-shadow:0 0 10px rgba(0,0,0,0.2);
 
text-decoration:none;
 
}

and this HTML:

<div class="container">
 
<a class="custom gallery" type="video" href="https://youtu.be/vpL7-122WHQ"><img src="images_movie/01.jpg" alt="violin"></a>
<a class="custom gallery" type="video" href="https://youtu.be/D3yqasa34vY"><img src="images_movie/02.jpg" alt="jump"></a>
 
<a class="custom gallery" type="video" href="https://youtu.be/vpL7-122WHQ"><img src="images_movie/03.jpg" alt="wedding"></a>
<a class="custom gallery" type="video" href="https://youtu.be/D3yqasa34vY"><img src="images_movie/04.jpg" alt="Donuts"></a>
 
</div>

to give me 4 horizontally positioned screenshots of YouTube movies that stretch across the Web page.

I would like to position the images so that I have 2 images on the first row and two images on the second row, vertically and horizontally aligned in a kind of square. This CSS code:

.gallery_type {
	list-style:none;
	display:flex;
	flex-direction:row;	
	flex-wrap:wrap;	
	align-items:center;	
	justify-content:center;
	margin:0 auto;
	}
 
.gallery_type {
	max-width:850px;
}
 
.gallery_type li {
	padding:5px;
	text-align:center;
	outline:1px solid #ffffff;
}
 
.gallery_type a {
	display:inline-block;
	vertical-align:bottom;
	padding:10px;
	background:#000;
	border:3px solid #FFF;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	transition:scale 0.3s;
	transform:scale 1.1;	
}
 
.gallery_type img {
	display:block;
	height:180px;
}

and this HTML:

<ul class="gallery_type">
	<li>
		<a href="#">
			<img src="images/01.jpg" alt="placeholder">
		</a>
	</li><li>
		<a href="#">
			<img src="images/02.jpg" alt="placeholder">
		</a>
	</li><li>
		<a href="#">
			<img src="images/03.jpg" alt="placeholder">
		</a>
	</li><li>
		<a href="#">
			<img src="images/04.jpg" alt="placeholder">
		</a>
	</li>
</ul>

does that, but how would I combine both CSS classes, please?

Top
Tags: