How to get text in front of image on hover?

🙋Get Help
1

Hi,

another question, sorry. I’m wondering how do I get the title in front of the image on hover?
I want to display the blog title when a user hovers over the image.

Ultimately, I also want to make the background a precise overlay on the image with a color.
Any help would be great.
This is what I currently have, where the title is shown below the image.
When hovering on the image the opacity works and the title remains ‘normal’

import React from 'react';
import { connect, styled } from 'frontity';
import Link from '@frontity/components/link';
import FeaturedMedia from "./featured-media";

const List = ({ state, actions, libraries }) => {
    const data = state.source.get(state.router.link);
    const Html2React = libraries.html2react.Component

    return (
        <Items>
            {data.items.map((item) => {
                const post = state.source[item.type][item.id]
                return (
                    <Project>
                        <Link key={item.id} link={post.link}>
                            <Description>
                                <Image>
                                    <FeaturedMedia id={post.featured_media}/>
                                </Image>
                                    <Html2React html={post.title.rendered} />
                            </Description>
                        </Link>
                    </Project>
                )
            })}
            {/* <PrevNextNav>
                {data.previous && (
                    <button
                        onClick={() => {
                            actions.router.set(data.previous)
                        }}
                    >
                        &#171; Prev
                    </button>
                )}
                {data.next && (
                    <button
                        onClick={() => {
                            actions.router.set(data.next)
                        }}
                    >
                        Next &#187;
                    </button>
                )}
            </PrevNextNav> */}
        </Items>
    )
}

export default connect(List)

const Items = styled.div`
    padding-top: 1em;
    justify-content: center;
    width: 80%;
`

const Project = styled.div`
`

const Image = styled.div`
    :hover {
        opacity: 0.3;
    }
`

const Description = styled.div`
    font-size: 20px;
`
2

Dude check this:
https://nicolasbava-memoriafp-default.layer0-limelight.link

                          <Article key={peliculas.id}>
                            <Link target="_blank" href={peliculas.link}>
                                <Cuadrado style={{backgroundImage:`url(${peliculas.acf.foto_pelicula})`}}>
                                    <Cartel>
                                    <Rayita></Rayita>
                                    <h3 dangerouslySetInnerHTML={{__html:peliculas.title.rendered.toUpperCase()}}></h3>
                                    <h3 className="año">{peliculas.acf.year}</h3>
                                    </Cartel>
                                </Cuadrado>
                            </Link>
                        </Article>

apply effect of hover in cartel,
In the link you can see the code anyways.