如何在 CSS/HTML 中將文本移動到卡片圖像疊加層的底部？

Question

我一直在嘗試將 CSS class 中的 justify-content 更改為“flex-end”和“end”，但文本沒有向下移動到底部。

我認為我們應該關注img-overlay class，因為那是我們 position 卡上文字的位置。

 .overlay.overlay-sm.shape { filter: brightness(0) invert(1); opacity: 0.15; height: 40px; }.overlay.overlay-sm.shape.wave { height: initial; width: 70px; }.overlay.overlay-sm.shape.xshape { height: 30px; }.portfolio.square { top: 28%; left: 20%; }.portfolio.circle { top: 8%; right: 35%; }.portfolio.triangle { top: 10%; right: 4%; }.portfolio.half-circle1 { bottom: 13%; left: 5%; }.portfolio.half-circle2 { bottom: 35%; left: 20%; }.portfolio.xshape { bottom: 10%; left: 8%; }.portfolio.wave { bottom: 38%; left: 6%; }.grid { width: 100%; margin: 1.5rem 0; }.grid-item { width: 33.33%; padding: 1rem 1.2rem; display: flex; justify-content: center; }.gallery-image { position: relative; overflow: hidden; border-radius: 16px; height: 330px; width: 100%; cursor: pointer; /* justify-content: flex-end; */ }.gallery-image img { position: absolute; height: 115%; width: initial; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center; /* justify-content: flex-end; */ /* cursor: pointer; */ }.gallery-image.img-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin: auto; z-index: 2; color: var(--light-one); background-color: rgba(120, 76, 251, 0.55); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 2rem 3.2rem; /* opacity: 0; */ /* I removed this one:: Rickard */ }.img-overlay.plus { position: relative; /* width: 100px; */ /* height: 100px; */ margin: auto 0; }.plus:before, .plus:after { content: ""; position: absolute; width: 4.5rem; height: 3px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--light-one); border-radius: 3px; }.plus:before { transform: translate(-50%, -50%) rotate(-90deg); }.img-description { width: 100%; }.img-overlay h3 { font-weight: 600; text-transform: uppercase; font-size: 1.5rem; }.img-overlay h5 { font-size: 1.15rem; font-weight: 300; }.gallery-image:hover.img-overlay { opacity: 1; transition: 0.3s ease; }.gallery-image:hover img { transform: translate(-50%, -50%) scale(1.1); }.more-folio { display: flex; justify-content: center; }

 <div class="grid-item logo-design"> <div class="gallery-image"> <img src="./img/portfolio/port1.jpg" alt=""> <div class="img-overlay"> <div class="plus"> <div class="img-description"> <h3>Logo Design</h3> <h5>View Demo</h5> </div> </div> </div> </div> </div>

Answer 1

刪除.img-overlay.plus overlay.plus 的 styles ：

 .overlay.overlay-sm.shape { filter: brightness(0) invert(1); opacity: 0.15; height: 40px; }.overlay.overlay-sm.shape.wave { height: initial; width: 70px; }.overlay.overlay-sm.shape.xshape { height: 30px; }.portfolio.square { top: 28%; left: 20%; }.portfolio.circle { top: 8%; right: 35%; }.portfolio.triangle { top: 10%; right: 4%; }.portfolio.half-circle1 { bottom: 13%; left: 5%; }.portfolio.half-circle2 { bottom: 35%; left: 20%; }.portfolio.xshape { bottom: 10%; left: 8%; }.portfolio.wave { bottom: 38%; left: 6%; }.grid { width: 100%; margin: 1.5rem 0; }.grid-item { width: 33.33%; padding: 1rem 1.2rem; display: flex; justify-content: center; }.gallery-image { position: relative; overflow: hidden; border-radius: 16px; height: 330px; width: 100%; cursor: pointer; /* justify-content: flex-end; */ }.gallery-image img { position: absolute; height: 115%; width: initial; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center; /* justify-content: flex-end; */ /* cursor: pointer; */ }.gallery-image.img-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin: auto; z-index: 2; color: var(--light-one); background-color: rgba(120, 76, 251, 0.55); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 2rem 3.2rem; /* opacity: 0; */ /* I removed this one:: Rickard */ }.plus:before, .plus:after { content: ""; position: absolute; width: 4.5rem; height: 3px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--light-one); border-radius: 3px; }.plus:before { transform: translate(-50%, -50%) rotate(-90deg); }.img-description { width: 100%; }.img-overlay h3 { font-weight: 600; text-transform: uppercase; font-size: 1.5rem; }.img-overlay h5 { font-size: 1.15rem; font-weight: 300; }.gallery-image:hover.img-overlay { opacity: 1; transition: 0.3s ease; }.gallery-image:hover img { transform: translate(-50%, -50%) scale(1.1); }.more-folio { display: flex; justify-content: center; }

 <div class="grid-item logo-design"> <div class="gallery-image"> <img src="https://source.unsplash.com/random/300x200" alt=""> <div class="img-overlay"> <div class="plus"> <div class="img-description"> <h3>Logo Design</h3> <h5>View Demo</h5> </div> </div> </div> </div> </div>

Answer 2

這將是我將文本疊加在圖像上的方法：

 .gallery-image { border-radius: 16px; min-height: 330px; cursor: pointer; background: center / cover no-repeat url("https://source.unsplash.com/random/300x200"); }.gallery-image.img-overlay { display: grid; place-content: end center; min-height: inherit; border-radius: inherit; color: var(--light-one, #fff); background-color: rgb(120 76 251 / 0.55); }.img-overlay h3 { font-weight: 600; text-transform: uppercase; font-size: 1.5rem; }.img-overlay h5 { font-size: 1.15rem; font-weight: 300; }

 <div class="gallery-image"> <div class="img-overlay"> <h3>Logo Design</h3> <h5>View Demo</h5> </div> </div>