animal-imagemasking

1import React from 'react';
2
3function index() {
4  return (
5    <>
6      <section className='grid grid-cols-2 gap-2 dark:bg-black bg-white border rounded-lg p-5'>
7        <figure className='relative h-fit'>
8          <img
9            src='https://images.unsplash.com/photo-1535968881874-0c39f1503640?w=500&auto=format&fit=crop'
10            alt=''
11            className='w-full h-full object-cover  aspect-square'
12            style={{
13              maskImage: "url('/cat.svg')",
14              maskSize: 'contain',
15              maskRepeat: 'no-repeat',
16              maskPosition: 'center',
17            }}
18          />
19        </figure>
20
21        <figure className='relative h-fit '>
22          <img
23            src='https://images.unsplash.com/photo-1556648011-e01aca870a81?w=500&auto=format&fit=crop'
24            alt=''
25            className='w-full h-full object-cover  aspect-square '
26            style={{
27              maskImage: "url('/panda.svg')",
28              maskSize: 'contain',
29              maskRepeat: 'no-repeat',
30              maskPosition: 'center',
31            }}
32          />
33        </figure>
34      </section>
35    </>
36  );
37}
38
39export default index;