My question can be particular problem in this case for which i am sorry but i have read "" this whole article and other tutorials on layout and didn't find approach to my problem. I have a collection of with image inside and text i use (onmouseenter onmouse) leave to show a p tag with text that is appended to the bottom of the card.

Now when i open the dropdown i want it to be displayed over the other card i read about using positions relative for the parent and absolute for the child and use margins but when i try to customize the Cards they end up all on top of each other and only one is shown.

I cannot append the image to the question because i don't have 10 reputation i can post a link "".

enter image description here

This is the html structure i use.

render() {
        const { id, brand, model, imgUrl } = this.props;
        const { shouldShowDescription } = this.state;

        return (

            <Card tabIndex="1" className={shouldShowDescription ? style.cardOn : style.cardOff} onMouseEnter={this.toggleDescriptionVisibility} onMouseLeave={this.toggleDescriptionVisibility}>
                <CardImg variant="top" src={imgUrl} />
                <CardBody className={style.cardText}>
                    <div className={shouldShowDescription ? style.fadeIn : style.fadeOut}>
                            * bar<br />
                            * foo <br />
                            * foo <br />
                            * foo <br />
                            * foo <br />

and this is the styles i have for the cards.

.cardOff {
    border: 0;
    width: 13rem;
    display: inline-block;
    opacity: 0.99;

.cardOn {
    border: 3px solid #f5f5f5;
    width: 13rem;
    display: inline-block;
    opacity: 0.99;

If someone can show me how this can be achieved or to give me a resource to learn from. Thank you in advance.

1 Answers

UpsylonD On

You could use :focus and z-index to pass your element over the others.

enter link description here


z-index:100; }