Hide text based on CSS conditionals with JavaScript

Question

Is there a way to use the if statement of JavaScript to hide CSS elements based on other CSS styles? I'm working in SharePoint and I'm applying some CSS codes to an image I have with some text with background in top of it. This image has a hover/animation effect and I would like to hide the text and background when the hover effect begins. Something like if(image3.opacity="1") then(h2, h2 span, h2 span.spacer)=hide . I'm a total newbie in javascript, so I would really appreciate your help!

the CSScode I've made so far is the next one:

#image3 {
opacity: 0.4;
filter: alpha(opacity=40);
box-shadow: 0px 0px 15px grey;
alt: missing;
    transition-property: opacity;
    transition-duration: .2s;
}
#image3:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); 
}
.image { 
   position: relative; 
   width: 100%;
}
h2 { 
   position: absolute; 
   bottom: 50px; 
   left: 5px; 
   width: 100%; 
}
 h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: 0px;  
   background: rgb(0, 0, 0);
   background: rgba(0, 0, 0, 0.6);
   padding: 9px; 
}
h2 span.spacer {
   padding:0 5px;
   background: rgba(0, 0, 0, 0);
}

Answer 1

You could use just CSS, depending on how your elements are arranged in the DOM. Assuming here that the h2 is a sibling of #image3 :

#image3:hover + h2,
#image3:hover + h2 span,
#image3:hover + h2 span.spacer {
    display: none;
}

If you want the elements to fade out instead of just disappear, you could use opacity and transition:

#image3 + h2,
#image3 + h2 span,
#image3 + h2 span.spacer {
    opacity: 1;
    transition: opacity 150ms ease 1s; /* 1s delay */
}

#image3:hover + h2,
#image3:hover + h2 span,
#image3:hover + h2 span.spacer {
    opacity: 0;
}

Answer 2

If you are able to get a hold of and attach the JQuery library, the following should work.

if ($("#image3").css("opacity") == "1") {
    $("h2").hide();
    $("h2 span").hide();
    $("h2 span.spacer").hide();
}