Display the full image over the card - html

Question

In this card, I have given an image tag. When I run the code half of the image gets hidden. My exception is that the image should overwrite the card like this:
.
So please let me know how to achieve this.
Here is my code:
.section6-card1-diagonal {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-color: transparent;
width: 246px;
height: 406px;
border-color: lightgrey;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.cards1 {
border-bottom: 225px solid #846EB1;
border-left: 401px solid transparent;
position: absolute;
bottom: 0;
left: -155px;
}
<div class="card section6-card1-diagonal">
<h5>Dell Inspiron Heavy metallic Display</h5>
<img class="section4-image" src="https://i5.walmartimages.com/asr/726f43a4-2dbb-4340-adc1-ce798580ba23_1.c5ced9469e3036a57d81678e9ebd2f1d.jpeg" />
<div class="cards1">
</div>
</div>

Answer 1

Here is a simple solution .
Just give negative z-index to the .cards1
.cards1 {
border-bottom: 225px solid #846EB1;
border-left: 401px solid transparent;
position: absolute;
bottom: 0;
left: -155px;
z-index:-1;
}
That will bring the div behind the image , Because the Image will have more priority in simple words

Answer 2

play width .section4-image class for better styling
.section6-card1-diagonal {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-color: transparent;
width: 246px;
height: 406px;
border-color: lightgrey;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.cards1 {
border-bottom: 225px solid #846EB1;
border-left: 401px solid transparent;
position: absolute;
bottom: 0;
left: -155px;
}
.section4-image {
height: 55vh;
background-color: "red";
width: 52vh;
margin-left: 10%;
margin-top: 0%;
}
<div class="card section6-card1-diagonal">
<h5>Dell Inspiron Heavy metallic Display</h5>
<img class="section4-image" src="https://i5.walmartimages.com/asr/726f43a4-2dbb-4340-adc1-ce798580ba23_1.c5ced9469e3036a57d81678e9ebd2f1d.jpeg" />
<div class="cards1">
</div>
</div>

Answer 3

Firstly: you need to upload transparent image (PNG) image of desktop.
Secondly: you need to upload small resolution image.
Currently you uploaded high resolution image which is 1500x1500
Now you need to add below css to show you image and also make it transparent.
.section4-image {
width:100%;
}
After make transparent image you need to add z-index css on image for show up on the shape.
.cards1 {
border-bottom: 225px solid #846EB1;
border-left: 401px solid transparent;
position: absolute;
bottom: 0;
z-index: -1;
}
.section4-image {
z-index: 1;
}
`
.section6-card1-diagonal {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-color: transparent;
width: 246px;
height: 406px;
border-color: lightgrey;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.cards1 {
border-bottom: 225px solid #846EB1;
border-left: 401px solid transparent;
position: absolute;
bottom: 0;
left: -155px;
}
.section4-image {
width:100%;
}
<div class="card section6-card1-diagonal">
<h5>Dell Inspiron Heavy metallic Display</h5>
<img class="section4-image" src="https://i5.walmartimages.com/asr/726f43a4-2dbb-4340-adc1-ce798580ba23_1.c5ced9469e3036a57d81678e9ebd2f1d.jpeg" />
<div class="cards1">
</div>
</div>