◆ UI Codesempai

Enlarge Gallery (React)

Using WTC's React gallery library (https://github.com/wethegit/react-gallery) and controlling image rendition by transitioning from the thumbnail. There are some small accessibility issues, making a gallery like this that allows the shuffling of items, but they're relatively small in the scheme of things, and probably forgivable under AA guidelines.

Category

Galleries & Carousels

Tech

ReactGlassmorphism

Tags

#react#image-gallery#transition

Download

24.1 KB zip

Source code

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Enlarge Gallery - @wethegit/react-gallery</title>
    <link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
<link rel="stylesheet" href="./style.css">

  </head>
    
  <body>
  <div id="root"></div>
    <script type="module" src="./script.js"></script>

  </body>
  
</html>

More in Galleries & Carousels