0

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

2
  • você pode adicionar a propriedade position: relative na classe .card, assim o elemento com a classe .card__image será posicionado em relação a esse elemento pai e terá o efeito de escala para cima.
    – Nowlights
    Commented 23/02/2023 às 22:14
  • @Nowlights, agradeço a ajuda, mas tanto minha classe .card como a classe .container tem posiçoes relativas. Ou eu devo tirar a relativa do container? Commented 24/02/2023 às 9:46

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .