-2
This is origanal code:
body {
padding: 50px;
}
.game-card2 {
overflow: hidden;
position: relative;
display: inline-block;
}
.game-card2 + .game-card2 {
margin-left: 16px;
}
.game-card2:hover {
cursor: pointer;
}
.game-card2:hover .game-card2__img img {
transform: scale(1.05);
}
.game-card2:before {
content: "";
position: absolute;
pointer-events: none;
z-index: 5;
top: -4px;
right: -4px;
width: 68px;
height: 38px;
background-color: #fff;
border-radius: 4px;
transform: skew(15deg);
}
.game-card2__label {
position: absolute;
z-index: 10;
top: 0;
right: 4px;
padding: 0 8px;
width: 40px;
color: #fff;
font-size: 14px;
line-height: 30px;
letter-spacing: 1px;
text-align: center;
}
.game-card2__label:before {
content: "";
position: absolute;
pointer-events: none;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 4px;
background: linear-gradient(90deg, rgba(248, 73, 27, 1) 0%, rgba(241, 47, 63, 1) 50%, rgba(220, 24, 96, 1) 100%);
transform: skew(15deg);
}
.game-card2__img {
overflow: hidden;
border-radius: 8px;
}
.game-card2__img:before {
content: "";
position: absolute;
z-index: 4;
pointer-events: none;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 8px;
box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.1);
}
.game-card2__img img {
display: block;
max-width: 100%;
border-radius: 8px;
transition: transform 300ms ease;
}
This is that i need:
body {
padding: 50px;
}
.game-card2 {
overflow: hidden;
position: relative;
display: inline-block;
}
.game-card2 + .game-card2 {
margin-left: 16px;
}
.game-card2:hover {
cursor: pointer;
}
.game-card2:hover .game-card2__img img {
transform: scale(1.05);
}
.game-card2:before {
content: "";
position: absolute;
pointer-events: none;
z-index: 5;
top: -4px;
right: -4px;
width: 68px;
height: 38px;
background-color: #fff;
border-radius: 4px;
transform: skew(15deg);
}
.game-card2__label {
position: absolute;
z-index: 10;
top: 0;
right: 4px;
padding: 0 8px;
width: 40px;
color: #fff;
font-size: 14px;
line-height: 30px;
letter-spacing: 1px;
text-align: center;
}
.game-card2__label:before {
content: "";
position: absolute;
pointer-events: none;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 4px;
background: linear-gradient(90deg, rgba(248, 73, 27, 1) 0%, rgba(241, 47, 63, 1) 50%, rgba(220, 24, 96, 1) 100%);
transform: skew(15deg);
}
.game-card2__img {
overflow: hidden;
border-radius: 8px;
}
.game-card2__img:before {
content: "";
position: absolute;
z-index: 4;
pointer-events: none;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 8px;
box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.1);
}
.game-card2__img img {
display: block;
max-width: 100%;
border-radius: 8px;
transition: transform 300ms ease;
}
I change % of game-card2__img img to 70%, but the background size not change. I Try anythigs, anymetods, but not work. How i change backgroung size
if need, this is the HTML:
PRO
PRO
PRO
Viwe Codepen
To proceed with doubt it is important [Dit] to post to remove this code and instead provide a [mcve] of the problem, and an objective explanation. To understand what kind of question serves the site and, consequently, avoid closures and negativities worth reading What is the Stack Overflow and the Stack Overflow Survival Guide (summarized) in Portuguese.
– Bacco