CSS3: Hover effect with opacity on div's and text - css

Question

I can't share a page on this, due to the page not being public. However, what I'm trying to do is create a hover effect on both a div and a H4 text element. Nothing of which seems to work for me. Here's my code:
HTML:
<div class="grid__item small--one-half medium-up--one-quarter">
<a href="/collections/hoop-earrings" class="collection-item collection-item--overlaid" data-aos="row-of-4"><div class="image-wrap">
<div class="collection-image collection-image--square lazyload" style='background-position: center center; background-image: url("https://cdn.shopify.com/s/files/1/1810/9951/collections/LDE42DSOS_Hexagon_Hoop_Earring_web_scroll_1200x_ad647924-a6b9-4c9a-b36a-7d6a3b0d0a6c_720x.jpg?v=1561755337");'>
</div>
</div>
<noscript>
<div
class="collection-image collection-image--square"
style="background-image: url(//cdn.shopify.com/s/files/1/1810/9951/collections/LDE42DSOS_Hexagon_Hoop_Earring_web_scroll_1200x_ad647924-a6b9-4c9a-b36a-7d6a3b0d0a6c_400x.jpg?v=1561755337); background-position: center center;">
</div>
</noscript>
<div class="collection-image--overlay-background"></div>
<span
class="collection-item__title collection-item__title--overlaid collection-item__title--heading collection-item__title--center">
<span>
Text Goes Here
</span>
</span>
</a>
</div>
CSS:
.collection-image--overlay-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.collection-item__title.collection-item__title--overlaid.collection-item__title--heading.collection-item__title--center {
opacity: 0!important;
-moz-transition: opacity .25s linear;
-webkit-transition: opacity .25s linear;
-o-transition: opacity .25s linear;
transition: opacity .25s linear;
}
#media only screen and (min-width: 768px) {
.collection-image--overlay-background:hover {
z-index: 1;
opacity: .8;
}
.collection-item__title.collection-item__title--overlaid.collection-item__title--heading.collection-item__title--center:hover {
z-index: 1;
opacity: 1;
}
}

Answer 1

I tried making a small snippet. See if it´s what you´re looking for.
Since you´re using the !important flag in one of your opacity rules, all the other changes after the fact will not take effect unless you also use !important. However I would not advice using !important that freely because whenever they are present such errors are a bit harder to track.
.container {
background-color: blue;
height: 100px;
}
.onHover {
background-color: red;
width: 80%;
height: 100px;
margin: 0 auto;
opacity: 0.5;
/*opacity: 0.5 !important; In your code you have
a line like this.*/
}
.onHover:hover {
opacity: 1;
}
<div class="container">
<div class="onHover">
<h4>My title Here</h4>
</div>
</div>