如何将文本移动到 CSS/HTML 中卡片图像叠加层的底部？

Question

我一直在尝试将 CSS class 中的 justify-content 更改为“flex-end”和“end”，但文本没有向下移动到底部。

我认为我们应该关注 img-overlay class，因为那是我们在卡片上放置文本的位置。

.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.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>

如何将文本移动到 CSS/HTML 中卡片图像叠加层的底部？

How to I move text to the bottom of in an image overlay for card in CSS/HTML?

html

css

flexbox

positioning