in my code i have card with background image that i'm trying to hover over it to display another card as shown in image below, my problem is i'm not able to figure out the transparent image in card.. i tried to add a real transparent image but it didn't work, is there a way to acheive the same in below image? thanks in advance

 <div >
                    <img  src="assets/images/recons.png" loading="lazy">
                    <div >

                        <hr >
                        <hr>

                    </div>
                    <div >
                        <h6 >Reconstructing The Business</h6>

                    </div>
                    <div >
                        <div >
                            <h6 >Reconstructing The Business</h6>
    
                        </div>
                    </div>


                </div>

before hover after hover

CodePudding user response：

you can use CSS properties visibility: hidden; or display: none

CodePudding user response：

Add some CSS to make the <img /> tag disappear on hover like so. Modify the transition duration as you like but this is the idea.

.card-img-top {
  transition: opacity 0.25s ease-in-out;
  opacity: 1;
}

.card-img-top:hover {
  opacity: 0;
}