CODEWITHSUNDEEP
csshoveropacity
Pumizo
Pumizo

Reputation: 283

Link hover turns off opacity

I have the following section with a png background image with high transparency. I made it this way because I don't know how to use the opacity feature. I even failed in making the hover link colour change to work. I guess there's something wrong with the css syntax.

Anyway, what I really want is to turn off the background image opacity when mouse passes on the link. How can I make this?

enter image description here

https://jsfiddle.net/h0b8e3t2/

<!-- Jobs -->
            <section id="jobs" class="wrapper style5">
                <div class="inner">
                <a href="#" target="new"><p><strong>Would You Like To Join Our Team?</strong></p></a>
                </div>
            </section>

.wrapper.style5 {
            background-color: #fcf3f7;
            background-image: url("/images/join.png");
            background-repeat: repeat-y;
            background-size: contain;
            border-style:solid none none none;
            border-width: 1,5px;
            border-color: #a4a4a4;
            text-align: center;
            font-size: 50px;
            line-height: 120%;
            color: #fff;


        }

            #jobs .wrapper.style5:hover {color:#fff}

Upvotes: 0

Views: 673

Answers (1)

Asons
Asons

Reputation: 87303

You could use pseudo element to solve that, and use a normal, non-transparent png

.wrapper.style5 {
  position: relative;
  border-style: solid none none none;
  border-width: 1, 5px;
  border-color: #a4a4a4;
  text-align: center;
  font-size: 50px;
  line-height: 120%;
  color: #fff;
}

.wrapper.style5 a::before,
.wrapper.style5 a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fcf3f7;
  z-index: -1;
}
.wrapper.style5 a::after {
  background: url(http://lorempixel.com/500/200/nature/1/);
  background-repeat: repeat-x;
  background-size: contain;
  opacity: 0.1;
}

.wrapper.style5 a:hover {
  color: #fff;
}
.wrapper.style5 a:hover::after {
  opacity: 1;
}
<!-- Jobs -->
<section id="jobs" class="wrapper style5">
  <div class="inner">
    <a href="https://docs.google.com/forms/d/e/1FAIpQLScerklD64H1kq9lz2UK58fJXhyWllJf-_ISCfFV4ew5A538VQ/viewform" target="new">
      <p><strong>Would You Like To Join Our Team?</strong></p>
    </a>
  </div>
</section>

Based on a comment updated with a 2:nd sample

.wrapper.style5 {
  position: relative;
  border-style: solid none none none;
  border-width: 1, 5px;
  border-color: #a4a4a4;
  text-align: center;
  font-size: 50px;
  line-height: 120%;
  color: #fff;
}

.wrapper.style5 a::before,
.wrapper.style5 a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fcf3f7;
  z-index: -1;
}
.wrapper.style5 a::after {
  background: url(http://lorempixel.com/500/200/nature/1/);
  background-repeat: repeat-x;
  background-size: contain;
  opacity: 0.1;
}

.wrapper.style5 a:hover p {          /*  changed this  */
  background: #fff;                  /*  changed this  */
}
.wrapper.style5 a:hover::after {
  /* opacity: 1;                         removed this  */
}
<!-- Jobs -->
<section id="jobs" class="wrapper style5">
  <div class="inner">
    <a href="https://docs.google.com/forms/d/e/1FAIpQLScerklD64H1kq9lz2UK58fJXhyWllJf-_ISCfFV4ew5A538VQ/viewform" target="new">
      <p><strong>Would You Like To Join Our Team?</strong></p>
    </a>
  </div>
</section>

Upvotes: 1

Related Questions