$0.45

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 in 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 on images, and the link color remains 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>
add comment

0 Answer

Your Answer