How to keep text opacity 100% with a lower background opacity, while ALSO applying hover

Question

So basically I have 4 links styled as buttons. I have the hover effect applied in my CSS the way I want it, though the text is inheriting the opacity. I want to prevent this, and on hover the only thing thing that changes in opacity is the Background-color of .button, while maintaining default font opacity the entire time. As you can see its readable on hover, but when not hovered the font is unreadable which is why I want the text opacity untouched.

Any solutions?

<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="css/style3.css">
</head>

<body>
<img src="images/portfolioAni.gif" class="img">
<img src="images/portfolioAniMobile.gif" class="imgmobile">
<div class="font">
    <p class="note">Welcome to my Portfolio, below you will find a menu of <br>
     all my coding assignments I completed in school. Some basic <br>
     exercices as well as entire websites using HTML, CSS, <br> 
     Javascript,Bootstrap and PHP.</p>
</div>

<main>
<img src="images/web.jpg" class="img2">
<img src="images/webmobile.jpg" class="img2mobile">
<div class="container1">
    <a href="htmlpage.html"><div class="button"><p>HTML and CSS</p></div></a>
    <a href="Project.html"><div class="button"><p>Javascript</p></div></a>
    <a href="Project.html"><div class="button"><p>PHP</p></div></a>
    <a href="Project.html"><div class="button"><p>Bootstrap</p></div></a>
</div>
</main>
<div class="block"></div>




</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>

.img{
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  max-width: 100%;
  height: auto;
}

.imgmobile{
    display: none;
}

p{
    text-align: center;
    font-size: 20px;
    font-family: OCR A Std, monospace ;
    text-decoration: none;
}

.note{
    margin-top: 100px;
    margin-bottom: 50px;
}

.img2{
  width: 100%;
  display: block;
}
.img2mobile{
  width: 100%;
  display: none;
}

.button{
    background-color: rgba(219, 193, 142, 0.9);
  border: none;
  color: white;
  text-align: center;
  font-size: 16px;
  opacity: 0.7;
  transition: 0.3s;
  display: block;
  text-decoration: none;
  cursor: pointer;
  height: 40px;
  width: 200px;
  margin-bottom: 25px;
  line-height: 2;
  border-radius: 2px;
}

.button:hover {opacity: 1}


a:link{ 
    text-decoration: none;
}

.block{
    width: auto;
    height: 20px;
    background-color: rgba(219, 193, 142);
    margin-top: 20px;
    margin-bottom: 10px;
}

main{
    position: relative;
    display: grid;
    place-items: center;
}
.container1{
    position: absolute;
}

score 0 · Answer 1 · answered Sep 01 '21 at 19:26

Use different element background and text

<button>
    <div class="bg"></div>
    <span>Text</span>
</button>

button {
    position: relative;
}
button > .bg {
    position: absolute;
    inset: 0;
    background-color: red;
    opacity: 1;
}
button:hover > .bg {
    opacity: 0;
}

or css before after selector

<button>
    <span>Text</span>
</button>

button {
    position: relative;
}
button::before {
    content: " ";
    position: absolute;
    inset: 0;
    background-color: red;
    opacity: 1;
}
button:hover:before {
    opacity: 0;
}

How to keep text opacity 100% with a lower background opacity, while ALSO applying hover

1 Answers1