show image at mouseover - html

Question

I'm trying to learn HTML/CSS better, and I'm trying to modify an existing template (https://github.com/codrops/AnimatedGridLayout).
The template has a grid layout, and I'm trying to make it so that when a grid item is moused over, it changes to show an image.
In the HTML, the code looks like this:
<a class="grid__item" href="#">
<h2 class="title title--preview">Demo</h2>
<div class="loader"></div>
<span class="category">Love & Hate</span>
<div class="meta meta--preview">
<img class="meta__avatar" src="img/authors/2.png" alt="author02" />
<span class="meta__date"><i class="fa fa-calendar-o"></i> 7 Apr</span>
<span class="meta__reading-time"><i class="fa fa-clock-o"></i> 5 min read</span>
</div>
</a>
In the CSS it looks like this:
a:hover, a:focus {
color: #333; outline: none;
}
/* Grid item */
.grid__item {
padding: 45px 55px 30px;
position: relative;
color: inherit;
background: #fff;
min-height: 300px;
cursor: pointer;
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
}
I added the below code to see if I could have an effect at mouseover:
.grid__item:hover {
background-color: yellow;
}
However, this made no change. Was this not the right way to handle a hover?
Any help would be greatly appreciated!

Answer 1

try nesting one parent above to get it right...instead of !important try nesting one more parent class make it priority high
section.grid .grid_item:hover {
background-color: yellow;
}

Answer 2

Add This code to css/style2.css
a.grid__item:hover {
background: red;
}
if this not working try
a.grid__item:hover {
background: red !important;
}
if this still not working try clearing your browser cache CTRL + SHIFT + DEL this works for almost every browser on windows