CODEWITHSUNDEEP
javascripthtmlcssreactjsframer-motion
Dylan Bozarth
Dylan Bozarth

Reputation: 1704

Images not loading fully until hovered over

On my React website, I have a vertical list of screenshots of my past projects, when the page first loads the images load, but are only a sliver until the user hovers over them. screenshot

Once hovered over the images expand to their full size and then work properly. I am looking to prevent the user from hovering over them in order for it to load properly.
The list is mapped from an array

items: [
        {
          image: "./images/spokanepowerstroke.jpg",
          title: "Spokane Power Stroke",
          link: "/powerstroke",
        },
       ...
      ]    

<Col md="auto">
      {this.state.items.map(({ title, image, link }) => (
        <motion.div className="thumbnail" variants={thumbnailVariants}>
          {" "}
          <motion.div 
          key={title}
            className="frame"
            whileHover="hover"
            variants={frameVariants}
            transition={transition}
          >
            <p className="projectstitle">{title}</p>
            <Link to={link}>
              <motion.img
                src={image}
                alt={image}
                variants={imageVariants}
                transition={transition}
              />
            </Link>
          </motion.div>
        </motion.div>
      ))}
</Col>

And the hover and transition effects are controlled with framer motion.

const transition = { duration: 0.5, ease: [0.43, 0.13, 0.23, 0.96] };

const thumbnailVariants = {
  initial: { scale: 0.9, opacity: 0 },
  enter: { scale: 1, opacity: 1, transition },
  exit: {
    scale: 0.5,
    opacity: 0,
    transition: { duration: 1.5, ...transition },
  },
};

const frameVariants = {
  hover: { scale: 0.95 },
};

const imageVariants = {
  hover: { scale: 1.1 },
};
const changepage = {
  in: {
    opacity: 1,
  },
  out: {
    opacity: 0,
  },
};
const pagetransition = {
  duration: 1.5,
};

I've looked over my code and have found no reason why the images are only loading partially. The website is viewable here Website And the Github repo with all the code is here Github (the projects page)
Thank you in advance for your expertise.

Upvotes: 3

Views: 697

Answers (1)

Jasmine
Jasmine

Reputation: 473

In your App.css code, change this: .thumbnail img { width: 46vw; height: 100%; }

to height:auto;

% heights will stretch/distort an image usually, if you want to keep aspect ratio use auto

also maybe setting width & height on the img element in your code might help prevent sizing issues, because right now the browser doesn't know how big the image actually is, and since it's loaded in via React JS not in the HTML first served it probably can't calculate it until the hover animation forces a repaint.

Upvotes: 4

Related Questions