Keeping button opacity full when parent div fades out

Question

I recently started building a website for one of my friends art projects and all has been good until now. I am using jQuery to make my bootstrap jumbotron fadeOut to 0.6 opacity when you hover, as well as making a new div with a button. The issue I am having is that when I hover over the jumbotron, it fades out and the button appears, however the button is also opaque. Please help me, I just recently finished the jQuery course on codecademy and am really excited to continue using it.

js fiddle - https://jsfiddle.net/rsgf7w3u/

Jquery

$(document).ready(function(){
$('.jumbotron').mouseenter(function(){
    $('.jumbotron').stop().fadeTo('fast', .6);
    $('.jumbotron').prepend('<div id="view-gallery"><button>View Gallery</button></div>');

});
$('.jumbotron').mouseleave(function(){
    $('.jumbotron').stop().fadeTo('slow', 1);
    $('#view-gallery').remove();
});

});

CSS

.jumbotron {
background-image:url("mc.jpg");
height:400px;
background-repeat:no-repeat;
background-size:cover;

}
#view-gallery button {
width:200px;
height:50px;
background-color:#2F2D30;
border-radius:1px;
border:none;
color:white;
}

Not possible using CSS. `opacity` affects all children/descendants of an element and **cannot** be overridden. You need to re-think your approach. — Paulie_D, May 12 '15 at 20:09

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

Opacity isn't easily overriden - you can try the rgba trick. I updated your fiddle: https://jsfiddle.net/rsgf7w3u/4/

background-color:rgba(47,45,48);

Reference: Opacity !important doesn't work

edited May 23 '17 at 11:58

Community

1
1

answered May 12 '15 at 20:22

Dreamcasting

454
2
5
21

Keeping button opacity full when parent div fades out

1 Answers1