linking image with content on hover

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:"&#9205; &#10145;Zum Warenkorb hinzufügen";
}

<a href="/?preview_id=4212&preview_nonce=a62d30b2b8&preview=true&add-to-cart=5767" class="hunderter"></a>

repzero · Answer 1 · 2016-08-09T15:48:12.273

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:"&#9205; &#10145;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>

Thank you for your comment, but actually I am trying the following: There is an Image (shop-product) and when it is hovered, I would like to get a effect like in this website: https://spacewallet.de/shop But my Code doesnt work and does not show any image — Krystian, Aug 09 '16 at 15:41

score 2 · Answer 2 · answered Aug 09 '16 at 15:40

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>&#9205; &#10145;Zum Warenkorb hinzufügen</span>
</a>

score 2 · Accepted Answer · edited May 23 '17 at 12:33

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>

linking image with content on hover

3 Answers3