center-imagemasking

1import React from 'react';
2 
3function CenterImageMasking() {
4  return (
5    <>
6      <section className='gap-2 dark:bg-black bg-white border rounded-lg p-5'>
7        <figure className='relative h-[80vh] '>
8          <img
9            src='https://images.unsplash.com/photo-1433838552652-f9a46b332c40?q=80&w=2070&auto=format&fit=crop'
10            alt=''
11            className='w-full h-full object-cover  aspect-square'
12            style={{
13              maskImage: "url('/splash-center.svg')",
14              maskSize: 'contain',
15              maskRepeat: 'no-repeat',
16              maskPosition: 'center',
17            }}
18          />
19        </figure>
20      </section>
21    </>
22  );
23}
24 
25export default CenterImageMasking;