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!