I'm currently developing a React application featuring flex container cards (referred to as .FilmCard with movie poster backgrounds) within another flex container with flex-wrap. Each card has an item positioned absolutely (an FontAwesome arrow icon). One of the movies is unexpectedly displaying the arrow on top, in the Navbar. Can anyone suggest a solution to fix this issue? Below are the CSS styles applied for the FilmCard and arrow icon.
import React from 'react';
import { PropTypes } from 'prop-types';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircleArrowRight } from '@fortawesome/free-solid-svg-icons';
function FilmCard({
filmKey,
title,
release,
image,
}) {
const imageStyle = {
backgroundImage: `url(${image})`,
backgroundSize: 'cover',
};
return (
<Link to={`/FilmDetails/${filmKey}`} key={filmKey}>
<div className="FilmCard" key={filmKey} style={imageStyle}>
<FontAwesomeIcon icon={faCircleArrowRight} className="CircleArrow" />
<div className="FilmDescription">
<h3>{title}</h3>
<p>{release}</p>
</div>
</div>
</Link>
);
}
FilmCard.propTypes = {
filmKey: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
release: PropTypes.string.isRequired,
image: PropTypes.string.isRequired,
};
export default FilmCard;.FilmsContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 3rem;
}
.FilmCard {
width: 20rem;
height: 30rem;
margin: 1.5rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
transition:
0.7s transform cubic-bezier(0.155, 1.105, 0.295, 1.12),
webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12),
box-shadow 0.7s;
}
.FilmCard:hover {
transition-timing-function: ease-in-out;
-moz-box-shadow: 13px 13px 0 0 black;
-webkit-box-shadow: 13px 13px 0 0 black;
box-shadow: 13px 13px 0 0 black;
transform: scale(1.03);
}
.CircleArrow {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 1.5rem;
color: white;
}View the page here
You can find my GitHub repository containing all the code here.
Your assistance would be highly appreciated!
Edit: I managed to prevent the arrow from showing by adjusting the z-index of the navbar. Thank you for your support!