I have an image with a color overlay, and I would like to zoom in on the image while fading out the color overlay on hover. I'm working with Svelte, Tailwind CSS, and TypeScript. Fading the color overlay is working, but the image zoom is not. However, when I remove the color overlay, the zoom works on hover. Here is my current code.
<!-- TileGrid.svelte --><script lang="ts"> // TypeScript code here import { projects } from "../data/project";</script><div class="grid grid-cols-5 gap-4"><!-- Project tiles go here --> {#each projects as project}<div class="tile relative overflow-hidden"><img src={project.image} alt={project.title} class="transition-transform duration-300 transform hover:scale-125" /><!-- Project title overlay --><div class="absolute inset-0 bg-black opacity-75 transition-opacity duration-300 hover:opacity-0"></div><div class="absolute bottom-0 left-0 p-4 text-white uppercase"><h2 class="text-lg font-semibold">{project.title}</h2></div></div> {/each}</div><style lang="postcss"> /* CSS classes here */</style>Any help is greatly appreciated!
I've been through a lot of documentation and countless videos with no progress. I appreciate any and all input. Thank you!