Question 237865 in Html Question posted in
Some basic documentation can be found here.

Html – How to set 100% opacity of this element?

I am beginner in Web Development and I’m creating my first site. I want to set the visible of class .maintitle (with text Jakub Poznanski) on 100% every time, but it’s coliding with hover options for a list when opacity is set on 0.6. Anyone know how to fix this issue? Code and github link under. + If you have any advices for me i am open

GitHub link: https://github.com/Vorhacz/HTML-CSS/tree/main/websiteCV

* {
  transition: 300ms;
  margin: 0;
  padding: 0;
  font-family: 'Century Gothic', sans-serif;
  box-sizing: border-box;
}

body {
  background: black;
  color: white;
}

.logo-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 100px;
}

.logo {
  width: 300px;
  height: auto;
}

.underlogotext {
  display: flex;
  justify-content: left;
  font-family: 'Dancing Script';
  font-size: 19px;
  font-style: italic;
  margin-top: 10px;
}

#header {
  width: 100%;
  height: 100vh;
  background-image: url(images/background.png);
  background-size: cover;
  background-position: center;
}

.container {
  padding: 10px, 10%;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.maintitle a {
  opacity: 1;
  font-size: 110%;
  color: #bed6ff;
}

nav ul li {
  display: inline-block;
  list-style: none;
  margin-top: 30px;
  margin-left: 30px;
}

nav ul li a {
  font-weight: 400;
  color: #e5eafc;
  text-decoration: none;
  border-radius: 100px;
  cursor: pointer;
}

nav ul li a:hover {
  color: #bed6ff;
}

nav ul li a:not(:hover) {
  opacity: 0.6;
}
<div id="header">
  <div class="container">
    <nav>
      <ul>
        <li class="maintitle"><a href="#">Jakub Poznański</a></li>
        <li><a href="#">O mnie</a></li>
        <li><a href="#">Umiejętności</a></li>
        <li><a href="#">Doświadczenie</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
  </div>
  <div class="logo-container">
    <div class="logo">
      <img class="logo" src="images/logo.png">
      <p class="underlogotext">Tutaj będzie jakiś mądry opis</p>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    good you reached out to other developers at Stackoverflow!

    By taking a look at your code on Github I noticed that you set the opacity for every hyperlink <a> element to 0.6 opacity. There are a few things you can do to fix the issue, but I think the solution I give you below is the best.

    Using opacity to change colors is actually not the best idea, because your elements will also become transparent. Looking at the website you have build until now I would recommend changing it to actual colors instead. This will always keep the colors consistent no matter what background color you use. So you’re CSS code will become something like this.

    nav ul li a { color: #898d98 }

nav ul li a:hover,
nav ul li.maintitle a { color: #bed6ff }

    This way your .maintitle hyperlink element will always have the same color.

    Good luck!

    Login or Signup to reply.
  2. 0 
    * {
  transition: 300ms;
  margin: 0;
  padding: 0;
  font-family: 'Century Gothic', sans-serif;
  box-sizing: border-box;
}

body {
  background: black;
  color: white;
}

.logo-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 100px;
}

.logo {
  width: 300px;
  height: auto;
}

.underlogotext {
  display: flex;
  justify-content: left;
  font-family: 'Dancing Script';
  font-size: 19px;
  font-style: italic;
  margin-top: 10px;
}

#header {
  width: 100%;
  height: 100vh;
  background-image: url(images/background.png);
  background-size: cover;
  background-position: center;
}

.container {
  padding: 10px, 10%;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.maintitle a {
  opacity: 1;
  font-size: 110%;
  color: #bed6ff;
}

nav ul li {
  display: inline-block;
  list-style: none;
  margin-top: 30px;
  margin-left: 30px;
}

nav ul li a {
  font-weight: 400;
  color: #e5eafc;
  text-decoration: none;
  border-radius: 100px;
  cursor: pointer;
}

nav ul li a:hover {
  opacity: 1;
  color: #bed6ff;
}

nav ul li a {
  opacity: 0.6;
}
    <div id="header">
  <div class="container">
    <nav>
      <ul>
        <li class="maintitle"><a href="#">Jakub Poznański</a></li>
        <li><a href="#">O mnie</a></li>
        <li><a href="#">Umiejętności</a></li>
        <li><a href="#">Doświadczenie</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
  </div>
  <div class="logo-container">
    <div class="logo">
      <img class="logo" src="images/logo.png">
      <p class="underlogotext">Tutaj będzie jakiś mądry opis</p>
    </div>
  </div>
</div>

    I think you should change two of your last css styles like in my modifications of your example.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search