Entire div color and does not change at the time of hover

Ask a question
1

I have made a div. Which contain image, text, and link. I want to give some hover effects on that div. This div background color is black. and font and link color are white. I want to make a div which color turns to red and link and text color turns to black at the time of hover. Also there will be a red overlay in the image. Currently only div text and background color change at the time of hover. I did not get any hover effects to images and link color remain red.

CSS : 

    .card{
    background-color: #221F1F;
    color: #fff;
    position: relative;

    }
    .card a{
    color: #D53F31;
    position: absolute;
    bottom: 40px;

    }
    .card:hover{
    background-color: #D53F31;
    color: #221F1F;

    }
<div class="card student" style="width: 18rem;">
          <img class="card-img-top" src="img/card1.jpg" alt="">
               <div class="card-body">

                     <p class="card-text">Get an <br>affordable degree <br>in Europe</p>
                       <a href="#" class="card-link">Know More</a>
       </div>
 </div>
Coin iconoffer bounty
add comment

0 Answer

Your Answer