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!
Top comments (0)