How to make a hover effect for a list of images?

Good evening, everyone. I need to make a hover effect for each image in the image list. How to do it, please tell me

function ListPhotos() {
 const [photos, setPhotos] = useState([])
 const [perPage, setPerpage] = useState(1)
 const [hovered, setHovered] = useState(false)


 const getData = useCallback(() => {
unsplash.photos
 .listPhotos(perPage, 15, "latest")
.then(toJson)
 .then(json => {
 setPhotos([...photos, ...json])
 setPerpage(perPage + 1)
})
 }, [photos, perPage])

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


 const styles = {
 padding: "15px",
}


 const childElements = photos.map(photo => (
 <li className="list-unstyled">
 <Link to={`/${photo.id}`}>
<img
className="rounded"
style={styles}
src={photo.urls.small}
alt={photo.description}
 onMouseOut={() => {
setHovered(true)
}}
 onMouseOver={() => {
 setHovered(false) 
}}
/>
</Link>
</li>
))


 return (
 <div className="container-fluid">
 <div className="row p-4">
 <div className="col-12">
 <DataLength InfiniteScroll={photos.length}
next={getData}
hasMore={true}
 loader={<div className="spinner-border" role="status">
 <span className="sr-only">Loading...</span>
</div>}
>
 <ElementType Masonry={"ul"}>
{childElements}
</Masonry>
</InfiniteScroll>
</div>
</div>
</div>
)
}

export default ListPhotos
April 19th 20 at 12:22
1 answer
April 19th 20 at 12:24
Solution
something like that

const childElements = photos.map(photo => (
 <li className="list-unstyled">
 <Link to={`/${photo.id}`}>
<img
 className={`rounded ${ hovered === photo.id ? 'hover-class' : "}`}
style={styles}
src={photo.urls.small}
alt={photo.description}
 onMouseOut={() => {
setHovered(null)
}}
 onMouseOver={() => {
setHovered(photo.id)
}}
/>
</Link>
</li>
 ))
it turns out in the css class hover-class I need to describe the logic of the hover effect, right?
and I for hover effect to reuse components I already have? - casey_Kunde commented on April 19th 20 at 12:27
@casey_Kunde,
I for hover effect to reuse components I already have

mmmm, well, in this piece of code nothing about them was not
how do they work?
maybe you can all picture them wrapped and to pass prop type
<HoverComponent doSomeShit={hovered === photo.id}>
 <img ... />
<HoverComponent />
- Izaiah_Stark20 commented on April 19th 20 at 12:30
@casey_KundeAA, so maybe the truth is simpler to make a single component ImageWithHoverEffects that will be depending on the prop or paint these additional items either to be just a picture - Izaiah_Stark20 commented on April 19th 20 at 12:33
for example, here in haste, Image, do not care where the insert will overlay on hover

- Izaiah_Stark20 commented on April 19th 20 at 12:36
@Izaiah_Stark20, Yes! You are right, now became clear. Send rays of goodness! Thank you very much) - casey_Kunde commented on April 19th 20 at 12:39

Find more questions by tags ReactJavaScript