Mon, 2019-08-19 10:08
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?