0

Estoy haciendo una lista de imágenes que se deslizan horizontalmente al hacer scroll, y cuando se posicione el puntero del mouse sobre una imagen (hover), esta se oculte y se muestre en su lugar una tarjeta con más información. Algo similar a lo siguiente:

introducir la descripción de la imagen aquí

Para implementar el efecto hice uso de la propiedad CSS position con sus valores absolute y relative, pero el inconveniente que no puedo solventar es que se pierde la posibilidad de realizar el scroll horizontal. Estoy trabajando con React y CSS puro sin ninguna otra librería de terceros y (por el momento) con el Navegador Chrome.

El código es el siguiente:

Fichero App.js:

import React from "react";
import "./style.css";
import Card from './Card'
import { actors, actresses } from '../stars'

export default function App() {
  return (
    <div>
      <h1>Hollywood</h1>
      <div className="row">
        <h2>Actors</h2>
        <div className="row__stars">
          {actors.map(actor => (
            <Card star={actor} />
          ))}
        </div>
      </div>
      <div className="row">
        <h2>Actresses</h2>
        <div className="row__stars">
          {actresses.map(actress => (
            <Card star={actress} />
          ))}
        </div>
      </div>
    </div>
  );
}

Fichero Card.js:

import React from "react";
import "./style.css";

const Card = ({ star }) => {
  return (
    <div className="card">
      <div className="card1">
        <img src={star.url} alt={star.name} />
      </div>
      <div className="card2">
        <img src={star.url} alt={star.name} />
        <div className="card2__description">
          <p>{star.name}</p>
          <p>{`Age: ${star.age}`}</p>
          <p>{`Gender: ${star.gender}`}</p>
        </div>
      </div>
    </div>
  );
};

export default Card;

Fichero style.css:

body {
  background-color: #111;
  color: #fff;
  font-family: "Roboto";
}

* {
  margin: 0;
}

h1,
h2 {
  font-weight: 400;
  margin: 20px;
}

.row {
  margin-left: 50px;
  position: relative;
}

.row__stars {
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  /*position: relative;*/
}

.row__stars::-webkit-scrollbar {
  display: none;
}

.card {
  width: 200px;
  height: 150px;
  flex-shrink: 0;
  margin-right: 10px;
}

.card1 {
  display: block;
  width: 100%;
  height: 150px;
  flex-shrink: 0;
  margin-right: 10px;
}

.card2 {
  display: none;
  width: 250px;
  height: 325px;
  flex-shrink: 0;
  margin-left: -25px;
  border-radius: 5px;
  margin-right: 10px;
  position: absolute;
  top: -20px;
  z-index: 1;
}

.card1 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card2 > img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.card2__description {
  background-color: #222;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  margin-top: -5px;
  padding: 10px;
}

.card2__description > p:first-child {
  font-weight: bold;
  font-size: 18px;
}

.card:hover .card1 {
  display: none;
}

.card:hover .card2 {
  display: block;
}

De todos modos dejo el enlace del código en Stackblitz: https://react-kuzg6p.stackblitz.io

Muchas gracias de antemano por su tiempo.

Aclaración: Si abren con toda la pantalla del navegador no se puede ver el problema puesto que se visualizan todas las imágenes. Coloqué 5 por una cuestión de simplicidad. Si achican la pantalla lateralmente podrán visualizar con claridad el desperfecto.

1 respuesta 1

0

Se puede lograr el scroll horizontal con los arrow keys si agregas la propiedad overflow: scroll al body y display: none al webkit en el css:

body {
    ...
    overflow: scroll ;  

}

body::-webkit-scrollbar {
    display: none;
}

el inconveniente es que el scroll afecta a ambos rows ya que el body esta siendo afectado.

Si deseas que solamente se muevan los rows de tarjetas de manera independiente, una manera de hacerlo seria usando useState y useRef

en App.js

const  App = ()  => {
    // crea un ref para cada fila de tarjetas
    const actorsRef = useRef(null)  
    const actressesRef = useRef(null)  


return (
<div>
  <h1>Hollywood</h1>     
  <div  className="row">           
    <div className="row__stars">
      <h2>Actors</h2> 
      
      <div  //Aqui agregue un wrapper adicional a la fila para las propiedades 
        className ="row_stars_wrap" 
        ref = {actorsRef} // actualiza el ref                
        tabIndex = {-1} // asigna un tabindex para poder aplicar el focus()
      >             
        {actors.map(actor => (
          <Card 
            actorsRef = {actorsRef}             
            key = {new Date().getTime().toString()+ Math.random()}
            star={actor}  
            actors={actors}        
            />
        ))}
      </div>
    </div>
  </div>

  ...
 // para el segundo row los cambios son similares
</div>

); }

en Card.js

const Card = ({ 
    star, 
    actorsRef, 
    actressesRef,
    actors
}) => {

  const [showbigCard, setShowBigCard] = useState(false); // esta variable permite 
        //mostrar la tarjeta grande al estar el puntero del mouse encima de ella

 //esta funcion cambia el focus() a la fila para que funcione el scroll 
  const handleMouseEnter = (e) => {        
    actors.some(a => a.name === e.target.alt)
      ? actorsRef.current.focus()  
      : actressesRef.current.focus()  

    setShowBigCard(true)
    
  }

   // esta variable solo actualiza la propiedad height de la tarjeta debajo del puntero del mouse
  const style = {   
    height: 250,
  }

  return (
    <div 
      className="card" 
      onMouseEnter={handleMouseEnter}
      onMouseLeave={() => setShowBigCard(false)}
      style ={showbigCard ? style : null }
    >
      {showbigCard ? (
        <div className = "card2-cont">
          <div className="card2">
            <img src={star.url} alt={star.name}  />
            <div className="card2__description">
              <p>{star.name}</p>
              <p>{`Age: ${star.age}`}</p>
              <p>{`Gender: ${star.gender}`}</p>
            </div>
          </div>

        </div>
       
      ) : (
        <div className="card1">
          <img src={star.url} alt={star.name} />
        </div>
      )}
    </div>
  );
};

y en styles.css:

body {
  background-color: #111;
  color: #fff;
  font-family: "Roboto"; 
  /* overflow: scroll; */
}


/* 
body::-webkit-scrollbar {
  display: none;
} */


* {
  margin: 0;
}

h1,
h2 {
  font-weight: 400;
  margin: 20px;
}

.row {  
  position: relative;
  height: 250px;
}

.row_stars_wrap {  
  display: flex;  
  margin-left: 50px;
}

.row_stars_wrap:focus {
  outline: none; 
}

.row__stars {
  display: flex;
  flex-direction: column;
  overflow-x: scroll;
  overflow-y :visible;
}

.row::-webkit-scrollbar {
  display: none;
}

.row__stars::-webkit-scrollbar {
  display: none;
}



.card {
  width: 200px;
  height: 150px;
  flex-shrink: 0;
  margin-right: 10px;
}

.card1 {
  display: block;
  width: 100%;
  height: 150px;
  flex-shrink: 0;
  margin-right: 10px;
}

.card2-cont {
  position: relative;
}

.card2 {
  display: block;
  width: 250px;
  height: 325px;
  flex-shrink: 0;
  margin-left: -25px;
  border-radius: 5px;
  margin-right: 10px;
  position: absolute;
  top: 50px;
  left: 30px;
  z-index: 1;
  transform: translateY(-100px)  translateX(-40px);
}

.card1 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card2 > img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.card2__description {
  background-color: #222;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  margin-top: -5px;
  padding: 10px;
}

.card2__description > p:first-child {
  font-weight: bold;
  font-size: 18px;
}

  

Aqui puedes ver el codesandbox https://codesandbox.io/s/clever-kilby-z1gpg?file=/src/Card.js:64-1145

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.