Shopify themes, liquid, logos, and UX
I would like to add a text hover to product images on my home page. How do I go about this.
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.
I am having trouble pasting this code. Can you assist me please.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025