CODEWITHSUNDEEP
htmlcsscss-selectors
amita00
amita00

Reputation: 189

show image at mouseover

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 &amp; 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!

Upvotes: 1

Views: 49

Answers (2)

satyajit rout
satyajit rout

Reputation: 1651

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;
}

Upvotes: 1

ShiZniT
ShiZniT

Reputation: 69

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

Upvotes: 0

Related Questions