How an I make a background image fade out to reveal text on hover?

Question

I'm trying to make a link's background-image disappear and the letter inside appear when hovering.

The closest I got is like this:

.slectercontainer {
  width: auto;
  height: 150px;
  margin-top: 10%;
  display: flex;
  text-align: center;
  justify-content: space-around;
}

.slectercontainer a {
  font-size: 25px;
  display: block;
  color: transparent;
  width: 150px;
  height: 150px;
}

.select1 {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  transition: 0.5s;
  background-image: "https://via.placeholder.com/150";
  background-size: cover;
}

.select1:hover {
  opacity: 0.3;
  color: rgb(255, 255, 255);
}

<div class="selectercontainer">
  <a href="select1.html">
    <div class="select1">
      select1
    </div>
  </a>
  <a href="/select2.html">select2</a>
  <a href="/select3.html">select3</a>
  <a href="/select4.html">select4</a>
</div>

and try with different way , but still not work

.slectercontainer{
  width: auto;
  height: 150px;
  margin-top:10%;
  display: flex;
  text-align:center;
  justify-content:space-around;
}

.slectercontainer a{
  margin-bottom: 19px;
    font-size: 25px;
    display: block;
    color: transparent;
    width: 150px;
   height: 150px;
   transition: 0.5s;
}

.slectercontainer a:hover{
  color:rgb(255, 255, 255);
}

.select1{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  transition: 0.5s;
}

.select1:hover{
  opacity: 0.3;
  color:rgb(255, 255, 255);
}

<div class="slectercontainer">
        <a href="/select1.html">
            <img src="image/select1.jpg" class="select1">
            select1
        </a>
        <a href="/select2.html">select2</a>
        <a href="/select3.html">select3</a>
        <a href="/select4.html">select4</a>

I'm doing only this feature hold day , and still can't pull this off , appreciate the help

Does this answer your question? [How do I give text or an image a transparent background using CSS?](https://stackoverflow.com/questions/806000/how-do-i-give-text-or-an-image-a-transparent-background-using-css) — Nathan Wiles, Jan 10 '22 at 15:31
`opacity` applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another. — Montek, Jan 10 '22 at 15:34
To change the `opacity` of a background only, use the `background` property with a color value that allows for an alpha channel. For example: `background: rgba(0, 0, 0, 0.4);` — Montek, Jan 10 '22 at 15:38
The question is a bit unclear. Maybe I can help you out if you can describe the question with the sample output you are expecting. — Aniket Sharma, Jan 10 '22 at 15:57

score 0 · Accepted Answer · answered Jan 10 '22 at 16:02

You can use from rgba instead opacity:

.slectercontainer {
  width: auto;
  height: 150px;
  margin-top: 10%;
  display: flex;
  text-align: center;
  justify-content: space-around;
}

.slectercontainer a {
  font-size: 25px;
  display: block;
  color: transparent;
  width: 150px;
  height: 150px;
}

.select1 {
  text-align: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  transition: 0.5s;
  background-image: url("https://s4.uupload.ir/files/1-6-5_ssnb.jpg");
  background-size: cover;
}

.blur{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.blur:hover{
   background: rgba(255, 255, 255, 0.6);
}

<div class="selectercontainer">
  <a href="select1.html">
    <div class="select1">
    <div class="blur">
      select1
    </div>
    </div>
  </a>
  <a href="/select2.html">select2</a>
  <a href="/select3.html">select3</a>
  <a href="/select4.html">select4</a>
</div>

You're welcome:) When you use opacity for example over a div, this affects both(background & text). But when you use rgba, only affects the background. https://www.w3schools.com/css/css_image_transparency.asp — Arman Ebrahimi, Jan 10 '22 at 20:27

How an I make a background image fade out to reveal text on hover?

1 Answers1