Hover affect, transparency+white background?

I’m currently creating a nav bar which is bold white text, the nav bar itself has no background.

I’m trying to use hover to change the text from white to transparent, and to change the background around the text to white, ideally I want the background to have rounded corners.

Any help would be great?


.text:hover {
  color: transparent;
  background-color: white;
  border-radius: 10px;

Is this what you mean?

1 Like

Yes, this is what I have been trying to use and it creates the white background but the text continues to stay white?

I’ll paste my current code below, i can’t think what would be causing it? Thanks

html {
    font-size: 16;

body {
    background-image: url('../images/background\ image\ 2.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: white;

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;

.navbar li {
    display: inline-block;
    padding: 9px;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    font-family: montserrat, sans-serif;
    margin-left: 45px;
    margin-right: -15px;

.navbar a:hover {    
    color: transparent;
  background-color: white;
  border-radius: 10px;

.navbar a {
    text-decoration: none;
    color: white;
    text-align: center;

#logo {
    width: 115px;
    height: auto;
    z-index: 5;
    margin-top: 2px;
    margin-left: -16px;

If we make the text transparent on a white background, it will seem like it’s white (although it simply doesn’t show).

Wouldn’t it be better to have the text be black, or a color similar to that of your background image?

I’m not entirely sure what the desired effect is supposed to be?

If you want the text to be transparent in order to show the background image, i’m not sure it can be done. I think the easiest way would be to have the text be of a similar color to the background?

It’s difficult to do and not all browsers support it.

here’s a tutorial on it: https://www.youtube.com/watch?v=FFf7wnA5MqQ

That’s actually pretty cool, thanks for sharing Steve!

Unfortunately, the video is from 2017. I have trouble getting mix-blend-mode to work consistently. But that aside, it is a cool CSS property in its own right.

Also check out CSS filter for some more coolness: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Sorry to get off topic.

1 Like