Before we dive into the main answer, here are some important points to consider:
1) It is recommended that your image is included in the HTML code rather than in the CSS. This allows for easier updating and ensures the image is considered part of the page content.
2) When using unicode characters in CSS, be sure to add a backslash before the number. For more information, refer to this resource.
Now, let's address your primary question...
Option 1:
To keep the CSS content value consistent, you can utilize CSS pseudo elements like ::after and/or ::before. These elements are essential for achieving the desired effect in CSS, as demonstrated in the following code snippet.
.cart-item-link {
position: relative;
display: inline-block;
border: transparent !important;
background-color: transparent !important;
}
.cart-item-link:hover::before {
content: "Add to Cart";
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
bottom: 20%;
padding: 15px;
background-color: rgba(100, 230, 230, 0.5);
min-width: 80%;
text-align: center;
}
<a href="/?preview_id=4212&preview_nonce=a62d30b2b8&preview=true&add-to-cart=5767" class="cart-item-link">
<img src="http://neuronade.com/wp-content/uploads/bfi_thumb/Shop-Produktbild_Bundle_englisch-min-mhvx28jvtfhpc0dhkugvgrvgvg1h17l9ze3zkr118a.jpg" alt="" />
</a>
Option 2:
An alternative approach is to place the "add to cart" text inside a <span> tag and style it using CSS with a different selector. This method is illustrated in the following code snippet.
.cart-item-link {
position: relative;
display: inline-block;
border: transparent !important;
background-color: transparent !important;
}
.cart-item-link > .cart-item-info {
display: none;
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
bottom: 20%;
padding: 15px;
background-color: rgba(100, 230, 230, 0.5);
min-width: 80%;
text-align: center;
}
.cart-item-link:hover > .cart-item-info {
display: block;
}
<a href="/?preview_id=4212&preview_nonce=a62d30b2b8&preview=true&add-to-cart=5767" class="cart-item-link">
<span class="cart-item-info">Add to Cart</span>
<img src="http://neuronade.com/wp-content/uploads/bfi_thumb/Shop-Produktbild_Bundle_englisch-min-mhvx28jvtfhpc0dhkugvgrvgvg1h17l9ze3zkr118a.jpg" alt="" />
</a>