Boa tarde a todos, estou tendendo a dar um efeito de escala em uma imagem que esta em um cartão, mas ao invez dela vir pra frente ela esta indo pra baixo, acredito que seja porque ela esta com posição absoluta. Que tenho formas de resolver isso?
Este é o código
Sou iniciante, agradeço quem puder me ajudar a resolver este problema.
.container{
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
margin-top: 3rem;
position: relative;
}
.card {
border: 0.5rem solid white;
width: 25%;
height: 60vh;
transition: filter .5s ease-in-out;
position: relative;
}
.card:nth-child(2){
margin: 0 3rem;
}
.card:hover .card__background {
opacity: 0;
}
.card__background {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1;
transition: opacity 1s ease-in-out;
}
.card__image {
width: 100%;
height: 100%;
object-fit: contain; /*se adapta ao container dele*/
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
transition: 1s ease-in-out;
z-index: 1;
}
.card:hover .card__image{
transform: scale(1.4);
}
.card__title {
font-size: 2rem;
text-transform: uppercase;
text-align: center;
position: absolute;
width: 100%;
bottom: 0;
transition: bottom 1s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import { Link } from "react-router-dom"
import spidermanList from '../data/spidermanList.json'
import styles from '../styles/componentes/Card.module.css'
function Card() {
return(
<div className={styles.container}>
{spidermanList.map((spiderman, index) => (
<Link to={spiderman.link} key={index} className={styles.card}>
<img src={spiderman.background} alt={spiderman.name} className={styles.card__background}/>
<img src={spiderman.img} alt={spiderman.name} className={styles.card__image}/>
<h2 className={styles.card__title}>{spiderman.name}</h2>
</Link>
))}
</div>
)
}
export default Card