Image fade out and link text fade in HTML CSS only

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>

score 0 · Answer 1 · answered Jan 29 '16 at 21:53

0

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;
}

answered Jan 29 '16 at 21:53

zgood

12,181
2
25
26

score 0 · Answer 2 · edited May 23 '17 at 11:50

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>

This worked, but only for one at a time, if I hovered the text the hover effect wouldn't work for icon at the same time. I would have to be off the text, and on the icon. — Ryan Brennan, Feb 01 '16 at 16:47

Image fade out and link text fade in HTML CSS only

2 Answers2