linking image with content on hover - css

Question

I hope you can help me. I was trying to hover an image with "add to cart" like here: https://spacewallet.de/shop
I dont know, what I am doing wrong here, can you help?
.hunderter {
background: url(http://neuronade.com/wp-content/uploads/bfi_thumb/Shop-Produktbild_Bundle_englisch-min-mhvx28jvtfhpc0dhkugvgrvgvg1h17l9ze3zkr118a.jpg);
display: block;
background-size: 100%;
border: transparent !important;
background-color: transparent !important;
}
a.hunderter:hover {
background-color: rgba(100,230,230,0.5);
background-position: 0 0;
content:"⏵ ➡Zum Warenkorb hinzufügen";
}

Answer 1

First, a few notes:
1) Your image should probably be part of the HTML. It will be changing and is part of the page content (vs design).
2) You can't use unicode in CSS the same way you do in HTML. You need a backslash before the number (see Placing Unicode character in CSS content value)
Now, on to the answer to your main question...
Option 1:
If you want the CSS content value to always be the same, you can use CSS pseudo elements ::after and/or ::before to accomplish what you were trying to do (see snippet below). You can't use content in CSS without these, though.
.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:
Of course, there is another possibility, too: The "add to cart" could also be placed into a <span> tag which could then use CSS with a slightly different selector like .cart-item-link:hover > .cart-item-info { ... }. (see snippet below)
.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>

Answer 2

You can solve this problem with adding a <span>, that is only visible on hover:
.hunderter {
position: relative;
background: url(https://unsplash.it/200/300);
display: block;
width: 200px;
height: 100px;
background-size: 100%;
}
.hunderter span {
position: absolute;
bottom: 0;
visibility: hidden;
}
a.hunderter:hover span {
background-color: rgba(100, 230, 230, 0.5);
visibility: visible;
color: white;
}
<a href="#" class="hunderter">
<span>⏵ ➡Zum Warenkorb hinzufügen</span>
</a>

Answer 3

If I understand you correctly..you want a hand on hover?...then you use
cursor:pointer
a.hunderter:hover {
background-color: rgba(100,230,230,0.5);
background-position: 0 0;
content:"⏵ ➡Zum Warenkorb hinzufügen";
cursor:pointer
}
.shop_bar{
background:black;
color:white;
opacity:0;
transition:all 0.5s;
}
.product_img:hover .shop_bar{
opacity:1;
}
Edit: The approach below shows how to add a bar at the bottom of the product...when you hover over the image the bard with some details will show..put whatever details you want in this html tag.
<div class="product_img">
<img src="https://spacewallet.de/wp-content/uploads/2016/06/businessblack-1-ohne-Rand.jpg">
<div class="shop_bar">
Buy this
</div>
</div>