text won't show up when hovering

user_17565368 0
Viewed 83

For my website I want to use a hover function that shows text once hovering over an imgae with the mouse. Because I want to implement multiple pictures I used a table whichin each td represents one image.

My problem is that once hovering, the overlay shows but there is no text displayed

I'm a complete beginner in html and css, so if there is anything else I can do different and more efficiently, feel free to let me know.

.container {
  position: relative;
  width: 50%;
}

.moon {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  width: 300px;
  opacity: 0;
  transition: .5s ease;
  background-color: white;
}

.container:hover {
  opacity: 0.6;
  filter: alpha(opacity=10);
}

.text {
  color: blue;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.mr {
  position: relative;
  float: left;
  width: 300px;
  padding-left: 40px;
}

.mr:hover {
  opacity: 0.6;
  filter: alpha(opacity=10);
}

.plant {
  position: relative;
  width: 300px;
  padding-left: 40px;
  padding-right: 120px;
  float: left;
}

.plant:hover {
  opacity: 0.6;
  filter: alpha(opacity=10);
}

.karteone {
  position: relative;
  width: 300px;
  padding-top: 40px;
}

.karteone:hover {
  opacity: 0.6;
  filter: alpha(opacity=10);
}

.kartetwo {
  position: relative;
  float: left;
  width: 300px;
  padding-top: 39.5px;
  padding-left: 40px;
}

.kartetwo:hover {
  opacity: 0.6;
  filter: alpha(opacity=10);
}
<body>
  <div class="Arbeitsprobe">
    <h2 class="myworksample">My Work Samples.</h2>
    <h5>Graphic Illustrator</h5>
    <center>
      <table>
        <tr>
          <td>
            <div class="container">
              <img class="moon" src="images/moon.png" alt="moon">
              <div class="overlay">
                <div class="text">Hello World</div>
              </div>
            </div>
          </td>
          <td><img class="mr" src="images/mr.me.png" alt="mr"></td>
          <td><img class="plant" src="images/plant planet.png" alt="plant"></td>
        </tr>
      </table>
    </center>
  </div>
</body>

css html
3 Answers

You could use tooltip class from css. This will display the tooltip text while hovering.

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
user_175879030

If you want the .overlay to appear on .container:hover, then the code sould be: .container:hover .overlay, like so:

.container {
  position: relative;
  width: 50%;
}

.moon {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  width: 300px;
  opacity: 0;
  transition: .5s ease;
  background-color: white;
}

.container:hover .overlay{
  opacity: 0.6;
  filter: alpha(opacity=10);
}

.text {
  color: blue;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.mr {
  position: relative;
  float: left;
  width: 300px;
  padding-left: 40px;
}

.mr:hover {
  opacity: 0.6;
  filter: alpha(opacity=10);
}

.plant {
  position: relative;
  width: 300px;
  padding-left: 40px;
  padding-right: 120px;
  float: left;
}

.plant:hover {
  opacity: 0.6;
  filter: alpha(opacity=10);
}

.karteone {
  position: relative;
  width: 300px;
  padding-top: 40px;
}

.karteone:hover {
  opacity: 0.6;
  filter: alpha(opacity=10);
}

.kartetwo {
  position: relative;
  float: left;
  width: 300px;
  padding-top: 39.5px;
  padding-left: 40px;
}

.kartetwo:hover {
  opacity: 0.6;
  filter: alpha(opacity=10);
}
<body>
  <div class="Arbeitsprobe">
    <h2 class="myworksample">My Work Samples.</h2>
    <h5>Graphic Illustrator</h5>
    <center>
      <table>
        <tr>
          <td>
            <div class="container">
              <img class="moon" src="images/moon.png" alt="moon">
              <div class="overlay">
                <div class="text">Hello World</div>
              </div>
            </div>
          </td>
          <td><img class="mr" src="images/mr.me.png" alt="mr"></td>
          <td><img class="plant" src="images/plant planet.png" alt="plant"></td>
        </tr>
      </table>
    </center>
  </div>
</body>

user_28174420

Or apply before and/or after in the CSS, like this:

.container {
  position: relative;
  width: 50%;
}

.moon {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  width: 300px;
  opacity: 0;
  transition: .5s ease;
  background-color: white;
}

.container:hover {
  opacity: 0.6;
  filter: alpha(opacity=10);
}

.text {
  color: blue;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.mr {
  position: relative;
  float: left;
  width: 300px;
  padding-left: 40px;
}

.mr:hover {
  opacity: 0.6;
  filter: alpha(opacity=10);
}

.plant {
  position: relative;
  width: 300px;
  padding-left: 40px;
  padding-right: 120px;
  float: left;
}

.plant:hover {
  opacity: 0.6;
  filter: alpha(opacity=10);
}

.karteone {
  position: relative;
  width: 300px;
  padding-top: 40px;
}

.karteone:hover {
  opacity: 0.6;
  filter: alpha(opacity=10);
}

.kartetwo {
  position: relative;
  float: left;
  width: 300px;
  padding-top: 39.5px;
  padding-left: 40px;
}

.kartetwo:hover {
  opacity: 0.6;
  filter: alpha(opacity=10);
}

/* new code from here */

.moon::after {
    content: "Hello World";
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 10px 40px;
    display: inline-block;
    top: 0;
    position: absolute;
    margin-top: 55px;
    text-align: center;
    line-height: 30px;
    left: 50px;
    text-transform: uppercase;
    opacity: 0;
    -webkit-transition: opacity 0.35s ease-in-out;
    -moz-transition: opacity 0.35s ease-in-out;
    -ms-transition: opacity 0.35s ease-in-out;
    -o-transition: opacity 0.35s ease-in-out;
    transition: opacity 0.35s ease-in-out;
}

.moon:hover::before {
    opacity: 1;
    transition: opacity 0.35s ease-in-out;
    content: "";
    background: rgba(0, 0, 0, 0.8);
    display: inline-block;
    width: 271px;
    height: 167px;
    top: 0;
    position: absolute;
    left: 0px;
}
.moon:hover::after {
    content: "Hello World";
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 10px 40px;
    display: inline-block;
    top: 0;
    position: absolute;
    margin-top: 55px;
    text-align: center;
    line-height: 30px;
    left: 50px;
    text-transform: uppercase;
    opacity: 1;
    transition: opacity 0.35s ease-in-out;
}
<body>
  <div class="Arbeitsprobe">
    <h2 class="myworksample">My Work Samples.</h2>
    <h5>Graphic Illustrator</h5>
    <center>
      <table>
        <tr>
          <td>
            <div class="container">
              <img class="moon" src="images/moon.png" alt="moon">
              <div class="overlay">
                <div class="text">Hello World</div>
              </div>
            </div>
          </td>
          <td><img class="mr" src="images/mr.me.png" alt="mr"></td>
          <td><img class="plant" src="images/plant planet.png" alt="plant"></td>
        </tr>
      </table>
    </center>
  </div>
</body>

user_28174420
Related