Home

How to add style to images?

First of all, it should be noted that I spent 3 hours in the wrong way to do this :D

This solution works very well with tailwindcss. I have no idea how to do it with pure css.

  const photo = photos.map((data) => {
    return {
      src: data.urls.regular,
      width: data.width,
      height: data.height,
      class:
        'hover:brightness-110',
    }
  })

I showed you how to do it with the code above. I distributed the photos that came with the api with map and added the class feature. brilliant :)

---

I am sharing the complete code below. You can run the packages after installing and copy-pasting.

packages you need 📦

tailwindcss axios react-photo-gallery

import { useEffect, useState } from 'react'
import Gallery from 'react-photo-gallery'
import axios from 'axios'

function Issues() {
  const [photos, setPhotos] = useState([])
  const getPhotos = async () => {
    try {
      const { data } = await axios.get(
        `https://picsum.photos/v2/list?page=2&limit=20`
      )
      setPhotos(data)
    } catch {
      console.log('error')
    }
  }

  useEffect(() => {
    getPhotos()
  }, [])

  const photo = photos.map((data) => {
    return {
      src: data.download_url,
      width: data.width,
      height: data.height,
      class: 'hover:brightness-110',
    }
  })

  return (
    <div>
      <Gallery photos={photo} />
    </div>
  )
}

export default Issues