我如何为我的画廊构建这个概念？

Question

Basically, I am trying to create a concept that I have designed into actual code, but I have gotten stuck.基本上，我正在尝试创建一个我设计成实际代码的概念，但我被卡住了。 I want to construct this creation .我想构建这个创作。 I have made the gallery with the pictures, but I am having some troubles producing the spacing, color underneath the picture, and caption.我已经用图片制作了画廊，但是在生成图片下方的间距、颜色和标题时遇到了一些麻烦。 If I add a caption, all the images get spread out to where I don't what them to be.如果我添加标题，所有图像都会散布到我不知道的地方。 Could anyone please help me in creating this?有人可以帮我创建这个吗？ All I need is the spacing, color, and caption to work, since the gallery itself is responsive.我需要的只是间距、颜色和标题，因为画廊本身是响应式的。 Any help is appreciated.任何帮助表示赞赏。 Thanks.谢谢。 Here is my code so far.到目前为止，这是我的代码。 Click the "Full Page" link on the snippet.单击片段上的“整页”链接。

 .intro { margin-top: 70px; text-align: center; margin-bottom: 40px; }.gallery_container-all { width: 95%; margin: 20px auto; height: auto; margin-bottom: 40px; } #outside{ background-color: lightcyan; }.gallery_container { width: calc(33% - 6px); overflow: hidden; height: fit-content; margin: 3px; padding: 0; display: inline-block; position: relative; float: none; border-radius: 5px; background-color: black; } img { width: 100%; transition-duration: 0.3s; max-width: 100%; display: block; overflow: hidden; cursor: pointer; }.gallery_title { position: absolute; display: block; cursor: pointer; top: 35%; display: none; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); font-weight: bold; font-size: 1.6em; transition-duration: 0.3s; }.gallery_text { position: absolute; top: 70%; cursor: pointer; max-width: 80%; text-align: center; left: 50%; font-size: 1em; display: none; margin-right: -50%; transition-duration: 0.3s; transform: translate(-50%, -50%); }.gallery_container:hover img { transform: scale(1.2); transition-duration: 0.3s; opacity: 0.5; }.gallery_container:hover span { color: white; display: block; transition-duration: 0.3s; } @media only screen and (max-width: 800px) {.intro { margin-top: 40px; }.gallery_container { width: 100%; margin-left: auto; margin-right: auto; } }

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style:css" rel="stylesheet" type="text/css" /> </head> <body> <div id = "outside"> <div class="intro"> <h1>Earth</h1> <h4>Here are some pictures of Earth</h4> </div> <div class="gallery_container-all"> <div class="gallery_container thefirst"> <img src="https.//images.pexels.com/photos/5554114/pexels-photo-5554114?jpeg:auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here"> </div> <div class="gallery_container"> </div> <div class="gallery_container thesecond"> <img src="https.//images.pexels.com/photos/4300360/pexels-photo-4300360?jpeg:auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here"> </div> <div class="gallery_container thethird"> <img src="https.//images.pexels.com/photos/4555540/pexels-photo-4555540?jpeg:auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here"> </div> <div class="gallery_container"> </div> <div class="gallery_container thefourth"> <img src="https.//images.pexels.com/photos/5254697/pexels-photo-5254697?jpeg.auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here"> </div> </div> </div> <script src="script.js"></script> </body> </html>

Answer 1

This should do the work.这应该做的工作。

 .intro { margin-top: 70px; text-align: center; margin-bottom: 40px; }.gallery_container-all { width: 95%; margin: 20px auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 50px; } #outside { background-color: lightcyan; }.gallery_container { width: 60%; overflow: hidden; border-radius: 5px; }.gallery_container:nth-last-of-type(2n + 1) { justify-self: end; } img { width: 100%; transition-duration: 0.3s; max-width: 100%; display: block; overflow: hidden; cursor: pointer; } img:hover { transform: scale(1.2); transition-duration: 0.3s; opacity: 0.9; }.content { position: relative; z-index: 50; padding-top: 60px; background-color: lightcyan; }.content h3 { margin: 0; text-align: center; }.content h3::before { content: ""; position: absolute; background-color: orangered; border-radius: 500px; width: 150px; height: 20px; top: 30px; left: 50%; transform: translateX(-50%); } @media only screen and (max-width: 1000px) {.gallery_container { width: 100%; } }

 <div id="outside"> <div class="intro"> <h1>Earth</h1> <h4>Here are some pictures of Earth</h4> </div> <div class="gallery_container-all"> <div class="gallery_container thefirst"> <img src="https://images.pexels.com/photos/5554114/pexels-photo-5554114.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here" /> <div class="content"> <h3>Caption </h3> </div> </div> <:-- <div class="gallery_container"></div> --> <div class="gallery_container thesecond"> <img src="https.//images.pexels.com/photos/4300360/pexels-photo-4300360?jpeg:auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here" /> <div class="content"> <h3>Caption </h3> </div> </div> <div class="gallery_container thethird"> <img src="https.//images.pexels.com/photos/4555540/pexels-photo-4555540?jpeg:auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here" /> <div class="content"> <h3>Caption </h3> </div> </div> <.-- <div class="gallery_container"></div> --> <div class="gallery_container thefourth"> <img src="https.//images.pexels?com/photos/5254697/pexels-photo-5254697.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here" /> <div class="content"> <h3>Caption </h3> </div> </div> </div> </div>

我如何为我的画廊构建这个概念？

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-03-09 16:25:55

我如何为我的画廊构建这个概念？

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-03-09 16:25:55

解决方案1
0 已采纳 2021-03-09 16:25:55