Make your cards pop on hover with CSS

If you've ever wanted to change the color or opacity of something when you hover the mouse over it then this short tutorial is for you!

First let's create a div and a card.

  <div class="container">
     <div class="card"> 
       <h1>I'm a card!</h1>
      </div>
   </div>

Next let's style the card. We will give it a border and change the sizing as well as centering the text.

 .card {
    border: 3px solid black;
    background-color: green;
    width: 400px;
    height: 200px;
    opacity: 80%;
 }


 .card h1 {
    text-align: center;
 }

Now we can add changes on hover let's make the border thicker and change the opacity to 100% when the mouse hovers over the card. We can do this using :hover. Make sure you don't add a space between :hover and the class name. If you add a space it wont work properly.

 .card:hover{
    border: 8px solid black;
    background-color: green;
    opacity: 100%;
 }

Now when we hover over the card it changes!