When window width becomes small it's over the content
Here’s my code:
$("window").load(function() { $("#body").removeClass("preload"); }); $(".share-btn").mouseenter(function() { setTimeout(function() { $(".item-menu").addClass("visible") }, 500); }); $(".share-btn").mouseleave(function() { setTimeout(function() { $(".item-menu").removeClass("visible") }, 500); }); $(".item-menu").hover(function() { $(".item-menu").addClass("visible") }); $(".item-menu").mouseleave(function() { setTimeout(function() { $(".item-menu").removeClass("visible") }, 500); }); $(".container-item").hover(function() { setTimeout(function() { $(".container-item").css("z-index", "1000") }, 500); });* { margin: 0; padding: 0; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } .item { width: 96%; height: 415px; background-image: url(https://sappun.diskn.com/outsidemall/globalsite/promotion/en/200612/product/7-1.jpg); -webkit-background-size: 100%; -o-background-size: 100%; background-size: 100%; background-repeat: no-repeat; position: relative; /*top:0; left:0;*/ z-index: 5; overflow: hidden; } .item-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* IE9 SVG, needs conditional override of 'filter' to 'none' */ -webkit-transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -ms-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } .item:hover .item-overlay { /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.42) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(28%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.42))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.42) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.42) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.42) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.42) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6b000000', GradientType=0); /* IE6-8 */ background-color: rgba(0, 0, 0, 0.4); } .item-content { position: absolute; width: 100%; bottom: 0; -webkit-transform: translate(0, 100%); -moz-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -o-transform: translate(0, 100%); transform: translate(0, 100%); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .item:hover .item-content { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .item-content { background: rgba(255, 255, 255, .85); height: 70px; padding: 15px; } /*<!-------------------------->*/ #contentWrap { width: 69% !important; min-width: unset !important; } #content { width: 100% !important; } #bid_4_box { width: 90%; height: auto; margin: 0 auto; } .four_inbox { width: 25%; height: auto; float: left; text-align: center; margin-bottom: 20px; } .four_img { width: 97%; height: auto; margin: 0 auto; } .fourbox_text_info { text-align: left; margin-left: 6px; } .fourbox_product_name { font-family: 'heebo', 'Noto Sans KR'; font-size: 12px; } .fourbox_b_price { display: inline-block; color: #d42c20; font-size: 12px; } .fourbox_p_price { text-decoration-line: line-through; display: inline-block; font-size: 12px; } @media screen and (max-width: 1050px) { .four_inbox { width: 50% !important; } } .bf_p { display: inline-block; margin-top: -20px; } @media screen and (max-width: 1800px) { #contentWrap { width: 88% !important; } }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class="wrapper" id="bid_4_box"> <div class="four_inbox"> <section class="row"> <div class="item"> <div class="item-overlay"></div> <div class="item-content"> <div class="fourbox_text_info section" id="tt"> <p class="fourbox_product_name">[SAPPUN BASIC] Kamishu Daily Flip-flop & Slipper (1cm)</p> </br> <div class="bf_p"> <p class="fourbox_b_price">22.95 USD</p> <p class="fourbox_p_price">45.90 USD</p> </div> </div> </div> </div> </section> </div> <div class="four_inbox"> <section class="row"> <div class="item"> <div class="item-overlay"></div> <div class="item-content"> <div class="fourbox_text_info section" id="tt"> <p class="fourbox_product_name">[SAPPUN BASIC] Kamishu Daily Flip-flop & Slipper (1cm)</p> </br> <div class="bf_p"> <p class="fourbox_b_price">22.95 USD</p> <p class="fourbox_p_price">45.90 USD</p> </div> </div> </div> </div> </section> </div> <div class="four_inbox"> <section class="row"> <div class="item"> <div class="item-overlay"></div> <div class="item-content"> <div class="fourbox_text_info section" id="tt"> <p class="fourbox_product_name">[SAPPUN BASIC] Kamishu Daily Flip-flop & Slipper (1cm)</p> </br> <div class="bf_p"> <p class="fourbox_b_price">22.95 USD</p> <p class="fourbox_p_price">45.90 USD</p> </div> </div> </div> </div> </section> </div> <div class="four_inbox"> <section class="row"> <div class="item"> <div class="item-overlay"></div> <div class="item-content"> <div class="fourbox_text_info section" id="tt"> <p class="fourbox_product_name">[SAPPUN BASIC] Kamishu Daily Flip-flop & Slipper (1cm)</p> </br> <div class="bf_p"> <p class="fourbox_b_price">22.95 USD</p> <p class="fourbox_p_price">45.90 USD</p> </div> </div> </div> </div> </section> </div> </div> </body>When you hover the img, it shows product name and price including `opacity’ black background.
The problem is when window size becomes small, that hovers things size over the imgs.
I’m stuck with this problem and all I want is that hover content keeps inside of img, it must not depend by window size.
Any help will be appreciated.
Your item has 96% width and fixed 415px height. When you resize window, the with/height ratio of item changes and image does not cover entire element.
Solution 1
Change background-size of item to make image always cover entire element:
.item { ... -webkit-background-size: cover; -moz-background-size: cover; /* add if you want to support Firefox 3.6 */ -o-background-size: cover; background-size: cover; ... } Solution 2
If you have square images only (or its with/height ratio is constant), change width and height of item as follows:
.item { ... width: 96%; height: 0; padding-bottom: 100%; ... } Adding 100% padding to the bottom of container and 0 height will make the container height same as width (100% refers to container width). To make it work, remember about setting box-sizing to border-box globally or for your item container (Ref.: What is use of box sizing in CSS).
Solution 3 (best):
Refactor your HTML and CSS to use flex/grid system and put your images in HTML (not as CSS backgrounds).
