Display Shopping Cart Icon on Hover

Hiding and showing shopping cart icon on hover using css is very easy.

A typical example of where this kind of design is been used is a shopping card.

If you have ever taken a good look on how most shopping card behaves, you will notice that once you hover on the card, the shopping cart, the icon will appear if it was hidden by default, or the icon will increase in size if it was visible.

This is done in order to prompt you to add the item to your shopping cart.

So in this article, we would be exploring how we can increase the size of an image on hover using CSS.

Html

<div class="card">
    <div class="image">
        <img src="./Food_category56.jpeg" alt=""> 
        <a class="" href="facebook.come">
        <i class="fas fa-shopping-cart icon1"></i> 
        <!-- please remember that this icon will only work if you included the link for your 	fontawesome -->
        </a>
        <!-- please include your image path here -->
    </div>
    <div class="Price">
        <h4>Price</h4>
        <h4>$20</h4>
    </div>
    <div class="description">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quaerat quos beatae iure, at deleniti similique aliquam aut voluptatem inventore.</p>
    </div>
</div>

after including your html code, next, we add the styling in css as shown below.

Css

body {
  background-color: black;
}
h4 {
  color: red;
}
.card {
  width: 60%;
  margin: 0 auto;
  border: 4px solid orangered;
  border-radius: 8px;
  color: white;
}
.image {
  width: 90%;
  margin: 0 auto;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  position: relative;
}
.icon1 {
  color: orange;
  position: absolute;
  right: 20px;
  bottom: 15px;
  transition: all 1.2s linear;
  opacity: 0;  /* this will make the icon invisible by default*/
}

.image img {
  max-height: 300px;
  width: 100%;
  display: block;
  border-radius: 8px;
  transition: all 1s ease-in-out;
}
.Price {
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  margin-bottom: 0.5rem;
}
.description {
  margin: 0 auto;
  width: 90%;
  margin-bottom: 0.5rem;
}

Result – only your image should differ

We hide the shopping cart icon already

Next, we want to show the shopping cart icon on hover.

so add the Css code below to your Css

CSS
.image:hover img {
  transform: scale(1.1);
}
.image:hover .icon1 {
  opacity: 1;
  transform: scale(2.5);
}

now, hover on the image and see how we show and hide the shopping cart with ease.

Your browser output should look like what’s shown below

Notice how the image zoom when you hover, you can learn how to zoom the image on hover here

This is just one way we can display to manipulate a shopping card and its contents using simple CSS codes.

Increasing The Cart Icon on Hover

If you want the icon to be visible by default, you can modify your CSS code as shown below

CSS

on the icon1 class, change the Css code to the following
.icon1 {
color: orange;
position: absolute;
right: 20px;
bottom: 15px;
transition: all 1.2s linear;
/* opacity: 0; / } .image:hover .icon1 { / opacity: 1; */
transform: scale(2.5);
}

This makes the icon to be visible but once you hover on it, it will increase in size together with the image.

You can also learn how to add nice overlay on the image if you wish

One thing you should keep in mind though is that, this code will work for any icon, so there is no need using a different code when you have a different icon.
hopefully you understand how you can shown and hide the shopping cart icon on hover using CSS.
If your icon does not display, click here to learn how to include icon in your website