You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
12 lines
651 B
JavaScript
12 lines
651 B
JavaScript
import React from 'react'
|
|
import { getImage } from 'gatsby-plugin-image';
|
|
|
|
const Image = ({title, image}) => {
|
|
return (
|
|
<div style={{'--image-url': `url(${getImage(image).images.fallback.src})`}} className="[&>h3]:hover:-translate-y-7 bg-[size:100%] bg-center hover:bg-[size:110%] duration-[2s] ease-[cubic-bezier(0, 1, 0.35, 1)] transition-all flex items-center justify-center relative bg-no-repeat bg-[linear-gradient(to_bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),var(--image-url)] basis-1/3 h-80">
|
|
<h3 className='transition uppercase text-white font-medium text-center'>{title}</h3>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Image |