CODEWITHSUNDEEP
htmlcsscss-selectors
user1012181
user1012181

Reputation: 8726

hover not working properly with opacity

HTML

        <div class="col-md-3">
            <img src="img/thumnail1.jpg" class="thumbnail">
            <div class="thumbnail-area fa fa-search-plus"></div>
        </div>

CSS

.thumbnail:hover{
    background-color: #6bb533;
    border: 1px solid #6bb533;
}
.thumbnail:hover .thumbnail-area{
    opacity:1;
}
.thumbnail-area{
    background: #6bb533;
    position: absolute;
    display: inline-block;
    padding: 10px;
    bottom: 20px;
    right: -1px;
    font-size: 21px;
    color: #fff;
    opacity:0;
}

I need to make the opacity of .thumbnail-area to be 1 when hovering the .thumbnail. But it seems not working. Please help me.

Upvotes: 1

Views: 111

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157284

Your .thumbnail-area is not nested under .thumbnail, it's adjacent to that, so you will need

.thumbnail:hover + .thumbnail-area{
    opacity:1;
}

Demo

Demo 2 (Just bounded the absolute positioned element using position: relative; container)

Demo 3 (Added an image for a real preview)

Also, if you see in the last demo, i.e Demo 3, opacity isn't comfortable, you can use display: none; and on :hover make it display: block; as anyways you are not fading the element, or transitioning, so you won't need opacity

Upvotes: 2

Related Questions