How to make whole Div hoverable - html

Question

I am trying to make somethng like that:enter image description here
Image from the left I have done without botton-right cut, I have made border-radius.
Image from the right is what happens when you hover on whole item. AS you can see only middle is highlighted. Any idea how to fix it?
Here is my Code:
HTML:
<div class="pojemnik" onclick="location.href='nitystandardowe.html'" >
<div class="zdjecie"> <img src="img/nitystandardowe.jpg"> </div>
<div class="tekst_"><h5>Nity Standardowe</h5> </div>
</div>
CSS:
.pojemnik{
display: flex;
width: 190px;
height: 170px;
background-color: #f5f7f6;
flex-wrap: wrap;
flex-direction: column;
color: silver;
font-family: sans-serif;
text-decoration: none;
border-bottom-right-radius: 30px;
}
.pojemnik:hover {
text-decoration: none;
cursor: pointer;
width: 190px;
height: 190px;
background-position:bottom;
background-image: url("../images/icons/strzalka-w-praw-tlo.png");
background-repeat: no-repeat;
bottom: 20px;
}
.tekst_ {
border-bottom: solid 2px white;
padding-left: 10px;
}
.tekst_:hover {
border-bottom: solid 2px blue;
background-color:#00a2fa;
border-bottom: solid 1px white;
color: white;
}
.tekst_ h5{
font-family: sans-serif;
font-size: 15px;
margin-top: 5px;
margin-left: 5px;
}
.tekst_ h5:hover{
font-family: sans-serif;
font-size: 15px;
margin-top: 5px;
margin-left: 5px;
color: white;
}
.zdjecie{
align-self: flex-start;
}
.zdjecie img{
position: relative;
width: 190px;
}

Answer 1

You need to specify that you also need to target the .tekst_ class upon hover of .pojemnik like so:
.pojemnik:hover .tekst_ {
border-bottom: solid 2px blue;
background-color:#00a2fa;
border-bottom: solid 1px white;
color: white;
}
.pojemnik{
display: flex;
width: 190px;
height: 170px;
background-color: #f5f7f6;
/* flex-wrap: wrap; */
flex-direction: column;
color: silver;
font-family: sans-serif;
text-decoration: none;
border-bottom-right-radius: 30px;
}
.pojemnik:hover {
text-decoration: none;
cursor: pointer;
width: 190px;
height: 190px;
background-position:bottom;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAUVBMVEX///8AAAD7+/s7OzusrKze3t7Z2dmvr6/b29tVVVUFBQVdXV34+Pjt7e0SEhKUlJRCQkLl5eXy8vJzc3NlZWXLy8tra2u9vb1KSkp5eXmZmZlkbd6rAAACfElEQVR4nO2di27aQBBFbWhSYhzCK03T///QVkhR0mAjEyBrn3vOB6C5mjs7uwvLVJWIiIiIiIiIiIiIiIiIiIjIG+1mWzqEW7LYNfU/9s+lA7kRs9f6jeVj6WBuQTuv31ndlQ7nBqzr/+BJ/FN/4r50RFdmu/qssF6Ujum6/DwSSDPqrkMhK4vLLoWoWnzoVEgy6q9uhSCJTz0KOUa971PIkdi91JCMuulViGkaL/0SKUb9wc/iCYmUWuzanOZkMaAWA4waIDHAqAESA4xq05gMARs4mwaB7FoMMCpFYrZRKU0juxYDsmgtToaApuEGjkB206BIzDYqpWlk12JAFgNqMcCoARIDjBogMcCoNo3JELCBs2kQyK7FAKNSJGYb1abRw2xsXDeLm6f9ej42fvcrPLcW29cTnzVSzsri5vjl3AQ4oxYfm9LBfolm+FvinkdXo+dhqMAT7yBGzgs8hXW9HCawLR3nBbSDFN6VDvMChi2nz6XDvIBh/z7BzyG/DvlraUA/nGwSB+9pAval/LPFNM+H515k0M/4B0pfyxzBv23DXwr3Z7BhZBB/5x1sUbzABm9RxiKTXIOMDCa3CXwG6TUI2arhfyqU3CbwAvEWZSwyyRbFZxBfg3iL0gXyT/R4gXSL8gXiLYpv9HiL4jOIr0G8RekC+Vs1xiKTXIOMDCa3CXwG6TXoly/TILlN4AXiLcpYZJItysggft7TiZldDIvy564t4BZNmH/In2HJn0PKnyXLnwfMn+nMn8vNn61eVWuyRQ+08w/6VkCBVTV7f6m6POMN76RY7A6PqvfD/u1horSbbekQRERERERERERERERERERE5Jv4CxOfKflP0w6QAAAAAElFTkSuQmCC");
background-size: 20px 20px;
background-repeat: no-repeat;
bottom: 20px;
}
.tekst_ {
border-bottom: solid 2px white;
padding-left: 10px;
}
/* .tekst_:hover {
border-bottom: solid 2px blue;
background-color:#00a2fa;
border-bottom: solid 1px white;
color: white;
} */
.pojemnik:hover .tekst_ {
border-bottom: solid 2px blue;
background-color:#00a2fa;
border-bottom: solid 1px white;
color: white;
}
.tekst_ h5{
font-family: sans-serif;
font-size: 15px;
margin-top: 5px;
margin-left: 5px;
}
/* .tekst_ h5:hover{
font-family: sans-serif;
font-size: 15px;
margin-top: 5px;
margin-left: 5px;
color: white;
} */
.zdjecie{
align-self: flex-start;
}
.zdjecie img{
position: relative;
width: 190px;
}
<div class="pojemnik" onclick="location.href='nitystandardowe.html'" >
<div class="zdjecie"> <img src="https://cdn.pixabay.com/photo/2020/11/17/15/44/cup-5752775__340.jpg"> </div>
<div class="tekst_"><h5>Nity Standardowe</h5> </div>
</div>