How can I add a text hover effect to product images on my home page?

[TrailFitSA101]

I would like to add a text hover to product images on my home page. How do I go about this. 

[topnewyork]

Hi @TrailFitSA101 

Adding a text hover effect to product images.

--------- HTML CODE START --------------

<div class="product">
  <img src="Image File/Link" alt="Product 1">
  <p class="product-text">Car 1 Detail Write here...........</p>
</div>

<div class="product">
  <img src="Image File/Link" alt="Product 2">
  <p class="product-text">Car 2 Details Write Here</p>
</div>

--------- HTML CODE END --------------

-------CSS CODE START --------------

<style>
.product {
  position: relative; /* Needed for absolute positioning of text */
}

.product-text {
  position: absolute; /* Position text absolutely relative to its container */
  left: 10px;
  top: 50;
  opacity: 0; /* Initially invisible */
  background-color: rgba(0, 0, 0,0.9); /* Background color for text */
  color: #fff; /* Text color */
  padding: 10px;
  text-alight: center;
  transition: opacity 0.3s ease-in; /* Smooth transition for opacity */
}

.product:hover .product-text {
  opacity: 1; /* Show text on hover */
  text-alight: center;

}

.product:hover{
filter: grayscale(20%);
opacity: 0.8;
}
</style>

-------CSS CODE END--------------

If I managed to help you then, don't forget to Like it and Mark it as Solutions.

[TrailFitSA101]

I am having trouble pasting this code. Can you assist me please.