Make the div item transparent, with non-transparent content WHEN hovering

Question

I have a <div id='a'> which becomes transparent when hovering on its parent element. But the div's content is supposed to be non-transparent. The code is following:

.changer{        
    background-color: gray;
    opacity:0;
    display: block;
    transition: .5s ease;
    backface-visibility: hidden;
}

.mb-4:hover .changer{
    opacity: 0.6;
}

<a href="#" class="d-block mb-4">
    <div id="a" class="changer d-inline">The text that must be non-transparent</div>
    <img class="img-fluid img-thumbnail" src="images/barcelona.jpg" alt="">  <!--this element is not very important-->
</a>

Possible duplicate of [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) — Temani Afif, May 01 '18 at 15:57

score 1 · Answer 1 · answered May 01 '18 at 15:53

1

use background color to do so lets say if you want to make a div translucent and the background is white then you need the following code :

background: rgba(255,255,255,0.6);

here you need to use rgb value and the last 0.6 value is the opacity level, (255,255,255) is the color code for white, you can make any color by changing the values.

remove the background-color and opacity attribute

answered May 01 '18 at 15:53

Bijay Sharma

401
5
10

But how to make that div’s content non-transparent, or otherwise with opacity: 1 ? – Sth May 01 '18 at 16:01
just remove the opacity attribute and use the background attribute with rgba value, try it – Bijay Sharma May 01 '18 at 16:03
I tried that method, it helped, but now the div content is permanently visible, which I don't need. Also I tried to play with 'display' property, setting it from none to block when hovering, but in that case the transition effect is missing. – Sth May 01 '18 at 16:20
if the content of your div is text then use this code color: rgba(0,0,0,0.5); here 0,0,0 represents black and 0.5 the opacity, the color attribute will make all text translusent – Bijay Sharma May 01 '18 at 16:27
or you can nest one more div within the existing one and put all your contents there then add the opacity attribute – Bijay Sharma May 01 '18 at 16:29
Tried it, didn't help. Will try nesting with another div inside if will not find better solution :/ – Sth May 01 '18 at 16:53

James Whiteley · Accepted Answer · 2018-05-03T10:19:06.997

0

Use CSS3's background opacity to change how visible the background of a div/img/whatever is without influencing the content inside it.

.inner {
  color: black;
  background: rgba(128, 0, 128, 0.25);
  transition: .5s ease;
  height: 3em;
}

.outer:hover .inner {
  background: rgba(128, 0, 128, 0.75);
  height: 4em;
}

.outer .inner div {
  width: 10em;
  height: 2em;
  background: gray;
}

a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

<a href="#" class="outer">
  <div class="inner">
    <div>Hover over me</div>
  </div>
</a>

EDIT

Modified snippet to prove that the inner div isn't affected at all by changes made to the outer divs.

EDIT 2

To change the transparency of the text too:

.inner {
  background: rgba(128, 128, 128, 0);
  color: rgba(0, 0, 0, 0);
  transition: .5s ease;
}

.outer:hover .inner {
  background: rgba(128, 128, 128, 1);
  color: rgba(0, 0, 0, 1);
  /* alternative: change the text color itself instead of changing opacity */
}

a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

<a href="#" class="outer">
  <div class="inner">Hover over me</div>
</a>

edited May 03 '18 at 10:19

answered May 01 '18 at 16:19

James Whiteley

3,363
1
19
46

Please read the comment on the answer above :) What you wrote is exactly what I have right now :) – Sth May 01 '18 at 16:25
Ah yeah I missed that. I don't get your issue with the div content being permanently visible though - do you want this to change with the transition too? – James Whiteley May 01 '18 at 16:27
Yes! The div content must appear with the div itself, when hovering and be 100% visible a.k.a opacity 1, not like the div itself – Sth May 01 '18 at 16:29
I'll modify my answer :) – James Whiteley May 01 '18 at 16:34
This is my markup right now: (unedited) ` .changer{ position: absolute; left: 20px; top:5px; background: rgba(128, 128, 128, 0); color:rgba(255,255,255,0); width:110px; height:140px; transition: .5s ease; backface-visibility: hidden; } .mb-4:hover .changer{ background: rgba(128, 128, 128, 0.6); color: rgba(255,255,255,1); } ` All done before your edit :) But the content is still opacity:1 without hovering. And in the styles section of the browser this line color:rgba(255,255,255,0); is crossed out. – Sth May 01 '18 at 16:49
I just tried this in a browser - it isn't crossed out for me, and the text fades in and out fine (once I change it to `color: rgba(0,0,0,0)` and `color: rgba(0,0,0,1)` so I can actually see it). Is some other CSS somewhere else in your code overriding it? – James Whiteley May 01 '18 at 17:11
Yes, there was some overwriting, I used !important to avoid it, and it worked. Actually this is my first question on stackov. and I couldn't even assume that this site has such a helpful and friendly community. Thank you very much for your time :) – Sth May 01 '18 at 17:19
Not to worry! Glad I could help. – James Whiteley May 01 '18 at 17:29

Make the div item transparent, with non-transparent content WHEN hovering

2 Answers2