Linear gradient is not able to give overlay to background of image

Question

 .q-items-container .q-item-info { float: left; position: relative; width: 30.3rem; height: 40rem; margin: 2rem; background: #ffffff; cursor: pointer; /* Add shadows to create the "card" effect */ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; } .q-items-container .q-item-info .q-food-img { width: 100%; height: 55%; } .q-items-container .q-item-info .q-food-info { position: absolute; top: 20px; left: 20px; z-index: 10000; color: white; } .q-items-container .q-item-info .q-stars { background-color: #2eb82e; padding: 2px; margin-top: 3px; border-radius: 3px; } .q-items-container .q-item-info .q-separator { width: 100%; height: 7px; background-color: #6c41a6; } .q-items-container .q-item-info .comp-container { width: 100%; height: 8rem; position: absolute; text-align: center; top: 275px; /* background-color:black; */ } .q-items-container .q-item-info .comp-container .q-review { width: 100%; height: 100%; display: flex; flex-direction: row; } .q-items-container .q-item-info .comp-container .q-review .review { width: 48%; /* margin:auto; */ display: flex; justify-content: center; align-items: center; flex-direction: column; } .q-items-container .q-item-info .comp-container .q-review .sep { width: 4%; display: flex; padding: 5px 0 5px 0; justify-content: center; align-items: center; } .q-items-container .q-item-info .comp-container .q-review .price { width: 48%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .q-item-info .comp-container .q-company { width: 8rem; height: 8rem; border: 0.8rem solid #6c41a6; -webkit-border-radius: 2rem; border-radius: 4rem; margin: auto; } .q-items-container .q-item-info .q-order-now { position: absolute; bottom: 0; width: 100%; padding: 1rem; margin-bottom: 0; height: 4rem; background: #6c41a6; color: #fff; font-size: 1.4rem; text-align: center; }

 <div class="q-items-container"> <div class="q-item-info"> <div class="q-food-info"> <div>xyz</div> <div>yzx</div> </div> <img style="background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), rgba(0,0,0,0.55);" class="q-food-img" src="https://static.pexels.com/photos/8313/food-eating-potatoes-beer-8313.jpg"> <div class="q-separator"></div> <div class="comp-container"> <img class="q-company" src="https://n6-img-fp.akamaized.net/free-icon/telegram-logo_318-102687.jpg?size=338c&ext=jpg"> <div class="q-review"> <div class="review"> <span style="color:#4d4d49;">24</span> <span style="color:#898989;">Reviews</span> </div> <div class="sep"> <div style="width:1px;height:100%;background-color:#d7d7d7;"></div> </div> <div class="price"> <span style="color:#4d4d49;">$4.99</span> <span style="color:#898989;">Avg.Price</span> </div> <div> </div> </div> </div> <div class="q-order-now" ng-click="goToListingPage(cart)"> <div ng-show="cart.isOpen">Order Now <span>&#8594;</span></div> <div ng-show="!cart.isOpen && !cart.isClosed">Opens at 8</div> <div ng-show="cart.isClosed">Closed</div> </div> </div>

Now i want to achieve overlay effect like

I tried with linear background gradient , but it did not work out. One thing I want to mention here is, my image is dynamically set. How can I achieve that?

Answer 1

Try to apply the following css, then I believe you'll be able to apply it to the right element in code.

.q-items-container .q-item-info .q-food-info {
    background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,1));
    width: 100%;
}