How to align this text below image.

[davey11]

Hi everyone!
Im a newbie and looking to see how I can align this text 'Playstation 5' below the image but still in the box.
My code:

https://codepen.io/racheldavey1/pen/rNqzQJa

Screenshot:

Screenshot, 2023-04-30 18:09:47 - Paste.Pics

Screenshot view

paste.pics

 

[FResher]

hello, have a look at this page using background-image, as Css

background-image - CSS: Cascading Style Sheets | MDN

The background-image CSS property sets one or more background images on an element.

developer.mozilla.org

 

[BigDady]

You have class=product in the HTML but don't use it. Instead, you waste code by duplicating the same thing in 4 rules product1 through product4. I deleted that and used one as a .product added .product img also removed the display: flex; and the margin: auto;
Here is the new CSS:

body {
    box-sizing: border-box;
    background-color: #f5f5f7;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}

nav {
    font-weight: bold;
    background-color: #e6e6e6;
    display: flex;
    justify-content: space-between;
    height: 80px;
    align-items: center;
    padding: 0rem calc((100vw - 1300px) /2);
    margin-bottom: 50px;
}

nav a {
    cursor: pointer;
    padding: 0 1.5rem;
}



.LOGO {
    font-size: 1.5rem;
    font-style: italic;
    padding: 0 2rem;
}


.featured {
    background-color: transparent;
    height: 300px;
    display: flex;
    align-items: flex-start;
    border-radius: 15px;
    justify-content: space-evenly;
}
.product{
    height: 250px;
    width: 250px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;   
    border-radius: 15px;
    text-align: center;
}
.product img{
    width: 250px;
    display: block;
    margin: auto;
}
.product:hover {
    /* on hover - scale to this x,y size */
    transform: scale(1.15,1.15);
    /* property values: name, duration, iteration, timing-function */
    animation: jiggle 0.5s infinite linear;
  }
 
  @keyframes jiggle {
    /* start at 0deg and this scale size.
       scale size is repeated here to maintain smooth scaling */
    0% {transform: rotate(0deg) scale(1.15,1.15);}
    /* midway rotate 2deg right */
    50% {transform: rotate(2deg) scale(1.15,1.15);}
    /* end rotate -2deg left */
    100% {transform: rotate(-2deg) scale(1.15,1.15)}
  }

  .fproducttitle {
    text-align: center;
  }

  caption {
    display: block;
    text-align: center;
  }


  div.featuredproductimg {
    vertical-align: bottom;
    display: flex;
    text-align: center;
    width: 250px;
}

 

[VBService]

In your code, caption is not an element, it's a class name.

<span class="caption">Playstation 5</span>

caption {
    display: block;
    text-align: center;
}

/* it should be with dot */
.caption {
    display: block;
    text-align: center;
}

Your .product1, ..., .product4 classes are the same, just use .product and add flex-direction: column

.product {
  height: 100%;
  width: 250px;
  margin: auto; 
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 
  border-radius: 15px;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}

e. g. [ full: on-line ]

    <div class="featured">
      <div class="product">
        <img src="https://picsum.photos/250/250?random=1">
        <div class="caption">Lorem ipsum 1</div>
      </div>
      <div class="product">
        <img src="https://picsum.photos/250/250?random=2">
        <div class="caption">Lorem ipsum 2</div>
      </div>
      <div class="product">
        <img src="https://picsum.photos/250/250?random=3">
        <div class="caption">Lorem ipsum 3</div>
      </div>
      <div class="product">
        <img src="https://picsum.photos/250/250?random=4">
        <div class="caption">Lorem ipsum 4</div>
      </div>
    </div>

.product {
  height: 100%;
  width: 250px;
  margin: auto; 
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 
  border-radius: 15px;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}

.product img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: center;
}

.caption {
  text-align: center;
}