How to get text in front of image on hover?


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(;
    const Html2React = libraries.html2react.Component

    return (
            { => {
                const post = state.source[item.type][]
                return (
                        <Link key={} link={}>
                                    <FeaturedMedia id={post.featured_media}/>
                                    <Html2React html={post.title.rendered} />
            {/* <PrevNextNav>
                {data.previous && (
                        onClick={() => {
                        &#171; Prev
                { && (
                        onClick={() => {
                        Next &#187;
            </PrevNextNav> */}

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;

Dude check this:

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

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