How to position a div relatively to an image?

Question

I have a page for a portfolio that does contain a grid that contain images with an info overlay.

Here's the link: cyrilmoisson-dev.netlify.app

Is there a solution to make the overlay div exactly the same size (height and width) as the image without using something like background: url(...); The problem is that images are random sized...

This question is not a duplicate of this one because it hasn't been resolved for me.

Here is the component code for every image:

src/component/ImageWithInfos/ImageWithInfos.jsx:

// Lazyload
import LazyLoad from 'react-lazyload';

// Style
import { ImageContainer, ImageSrc, ImageInfoContainer, ImageInfo } from './styles';

// Utils
import PropTypes from 'prop-types';
import { v4 as uuid } from 'uuid';

const ImageWithInfos = ({ height, width, src, title, infos }) => (
    <LazyLoad height={height} offset={height + 100}>
        <ImageContainer height={height} width={width}>
            <ImageSrc src={src} alt={title} />
            <ImageInfoContainer>
                <ImageInfo main>{title}</ImageInfo>
                {infos.map((info) => <ImageInfo key={uuid()}>{info}</ImageInfo>)}
            </ImageInfoContainer>
        </ImageContainer>
    </LazyLoad>
);

ImageWithInfos.propTypes = {
    height: PropTypes.number.isRequired,
    width: PropTypes.number.isRequired,
    src: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    infos: PropTypes.array,
};

export default ImageWithInfos;

src/component/ImageWithInfos/styles.js

// Style
import styled, { css } from 'styled-components';

export const ImageContainer = styled.div`
    height: ${({ height }) => `${height}px`};
    width: ${({ width }) => `${width}px`};
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
`;

export const ImageSrc = styled.img`
    display: block;
    object-fit: contain;
    width: 100%;
    height: 100%;
`;

export const ImageInfoContainer = styled.div`
    z-index: 5;
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: 1s ease;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &:hover {
        opacity: 1;
        background-color: rgba(0, 0, 0, .7);
        scale: 1.1;
    }
`;

export const ImageInfo = styled.span`
    padding: .2rem 1rem;
    color: whitesmoke;
    text-align: center;
    text-transform: capitalize;
    ${({ main }) => main && css`
        font-weight: 800;
    `}
`;

src/component/ImageWithInfos/index.js

export { default } from './ImageWithInfos';

Thanks for your help.

BTW: I'm using react and styled-components, if it changes anything...

Answer 1

I believe you could place both the image and the overlay in the same div and have the overlay element cover the whole parent div:

<div className="parent">
  <img />
  <div className="overlay"></div>
</div>

.parent {
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
}