Hover effect on image and button

Question

I have an image with a button centered in the middle of my image. I want when I hover on my image to add an opacity on my image and change the color of my button. The problem I have is that, when I hover over my image, my button also has an opacity which I don't want. I have tried z-index, but it is not working.

This is what i have done so far:

 #asides .aside-map { min-height: 20px; margin-top: 20px; margin-bottom: 10px; text-align: center; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; position:relative; width: 100%; height: 350px; background: url("http://placehold.it/350x150"); } #asides .aside-map .btn-main.map { position: relative; top: 50%; } #asides .aside-map:hover { opacity: 0.5; } #asides .aside-map:hover > .btn-main.map { background-color: rgb(254, 204, 0); border: 2px solid rgb(254, 204, 0); opacity: 1; } 

 <div id="asides"> <a class="aside-map"> <div class="btn btn-main map"> <span class="fa fa-map-marker">Show Map</span> </div> </a> </div> 

I am not able to display an image in the snippet, but this is how it looks like:

And when I am hovering on my image this is what i have:

Both my image and button have an opacity of 0.5 and I would like to have my button without any opacity

Answer 1

Your issue is that opacity: 0.5 set opacity for the whole element.

You can use background: rgba(0, 0, 0, 0.5) instead:

 #asides .aside-map { min-height: 20px; margin-top: 20px; margin-bottom: 10px; text-align: center; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; position:relative; width: 100%; height: 350px; background: url("http://placehold.it/350x150"); } #asides .aside-map .btn-main.map { position: relative; top: 50%; } #asides .aside-map:hover { background: rgba(0, 0, 0, 0.5); } #asides .aside-map:hover > .btn-main.map { background-color: rgb(254, 204, 0); border: 2px solid rgb(254, 204, 0); opacity: 1; } 

 <div id="asides"> <a class="aside-map"> <div class="btn btn-main map"> <span class="fa fa-map-marker">Show Map</span> </div> </a> </div>