Image fade out and link text fade in HTML CSS only - html

Question

Trying to make icons fade to .5 opacity and have link text fade in to 1.0 opacity at the same time. I can only get one to work. Trying to fix this without totally revamping the css and html if possible.
I'm trying to do this for the shop online store icons of this website:
http://mbc.milkstreetmarketing.com/.
.shoprow {
margin-bottom: 10px;
height: 100%;
width: 80%;
margin: 0 auto;
text-align: center;
padding-top: 2%;
padding-bottom: 4%;
}
.icons {
display: inline-block;
width: 11%;
padding: 0 10%;
position: relative;
}
.comingsoon {
position: absolute;
top: 40%;
left: 0;
right: 0;
font-size: 2vw;
color: #8ddc2b !important;
font-weight: bold !important;
opacity: 0;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
.comingsoon:hover {
opacity: 1;
}
.shopnow {
position: absolute;
top: 40%;
left: 0;
right: 0;
font-size: 2vw;
color: red !important;
font-weight: bold !important;
opacity: 0;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
.shopnow:hover {
opacity: 1;
}
.shoptitlesactive {
left: 0;
right: 0;
position: absolute;
color: #8ddc2b !important;
font-weight: bold;
}
.shoptitlesinactive {
left: 0;
right: 0;
position: absolute;
color: #bcbdc0 !important;
font-weight: bold;
}
<div id="shopwrapper">
<div id="shopoverlay">
<div id="shopstore">Shop Online Store</div>
<div class="shoprow">
<div class="icons">
<img src="http://mbc.milkstreetmarketing.com/wp-content/uploads/2015/06/Icon-2.png" class="imgicon"></img>
<p class="comingsoon">Coming Soon!</p>
<p class="shoptitlesinactive">ABRASIVES</p>
</div>
</div>
<div class="icons">
<img src="http://mbc.milkstreetmarketing.com/wp-content/uploads/2015/06/Icon-6.png">
<p class="shopnow">Shop Now!</p>
<p class="shoptitlesactive">DRILLING</p>
</div>
<div class="icons">
<img src="http://mbc.milkstreetmarketing.com/wp-content/uploads/2015/06/Icon-1.png">
<p class="comingsoon">Coming Soon!</p>
<p class="shoptitlesinactive">ELECTRICAL</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

Have you tried something like this?
.icons:hover .shopnow, .icons:hover .comingsoon{
opacity: 1;
}
.icons:hover img{
opacity: .5;
}
Then you can remove these:
.shopnow:hover {
opacity: 1;
}
.comingsoon:hover {
opacity: 1;
}

Answer 2

I think you are looking for the + selector:
.imgicon:hover + .comingsoon, .comingsoon:hover {
opacity: 1;
}
.imgicon {
transition: opacity .5s ease-in-out;
}
.imgicon:hover {
opacity: 0.5;
}
When you hover .imgicon or .comingsoon, opacity: 1 is applied to .commingsoon. And when you hover .imgicon, opacity: 0.5 is applied to it.
.shoprow {
margin-bottom: 10px;
height: 100%;
width: 80%;
margin: 0 auto;
text-align: center;
padding-top: 2%;
padding-bottom: 4%;
}
.icons {
display: inline-block;
width: 11%;
padding: 0 10%;
position: relative;
}
.comingsoon {
position: absolute;
top: 40%;
left: 0;
right: 0;
font-size: 2vw;
color: #8ddc2b !important;
font-weight: bold !important;
opacity: 0;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
.imgicon:hover + .comingsoon, .comingsoon:hover {
opacity: 1;
}
.imgicon {
transition: opacity .5s ease-in-out;
}
.imgicon:hover {
opacity: 0.5;
}
.shopnow {
position: absolute;
top: 40%;
left: 0;
right: 0;
font-size: 2vw;
color: red !important;
font-weight: bold !important;
opacity: 0;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
.shopnow:hover {
opacity: 1;
}
.shoptitlesactive {
left: 0;
right: 0;
position: absolute;
color: #8ddc2b !important;
font-weight: bold;
}
.shoptitlesinactive {
left: 0;
right: 0;
position: absolute;
color: #bcbdc0 !important;
font-weight: bold;
}
<div id="shopwrapper">
<div id="shopoverlay">
<div id="shopstore">
Shop Online Store
</div>
<div class="shoprow">
<div class="icons">
<img src="http://mbc.milkstreetmarketing.com/wp-content/uploads/2015/06/Icon-2.png" class="imgicon"></img>
<p class="comingsoon">Coming Soon!</p>
<p class="shoptitlesinactive">ABRASIVES</p>
</div>
</div>
<div class="icons">
<img src="http://mbc.milkstreetmarketing.com/wp-content/uploads/2015/06/Icon-6.png">
<p class="shopnow">Shop Now!</p>
<p class="shoptitlesactive">DRILLING</p>
</div>
<div class="icons">
<img src="http://mbc.milkstreetmarketing.com/wp-content/uploads/2015/06/Icon-1.png">
<p class="comingsoon">Coming Soon!</p>
<p class="shoptitlesinactive">ELECTRICAL</p>
</div>
</div>