Why does the opacity not work when I hover over the square?

Question

When I hover over the square, I want the text "MENU" to go and "Google" and "Youtube" to appear. I gave the opacity value for it. "MENU" text disappears but other texts are not visible. Why is Youtube and Google text not showing? I gave visibility: visible and visibility: hidden instead of opacity but I still get the same result. Am i selecting the wrong div's?

CSS body {
  background-color: aquamarine;
}

.square {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: azure;
  position: relative;
  transition: 1s transform;
}

.square:hover {
  transform: scale(4);
}

.div1::after {
  position: absolute;
  content: "MENU";
  right: 27px;
  top: 40px;
}

.square:hover div:nth-child(1) {
  opacity: 0;
}

.div2::after {
  content: "- Google";
  position: absolute;
  bottom: 25px;
  right: 5px;
  font-size: 10px;
  border: 2px solid grey;
  padding: 2px;
  opacity: 0;
}

.square:hover div:nth-child(2) {
  opacity: 1;
}

.div3::after {
  content: "- Youtube";
  position: absolute;
  bottom: 2px;
  right: 5px;
  font-size: 10px;
  border: 2px solid grey;
  padding: 2px;
  opacity: 0;
}

.square:hover div:nth-child(3) {
  opacity: 1;
}

HTML
<div class="square">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</div>

You've got your `::after` elements set to `opacity: 0` and don't change this value when you're hovered. — MattHamer5, Aug 26 '21 at 12:16

score 0 · Answer 1 · 2021-08-26T12:24:35.283

If you have added content using after , then add after in those hover also to work the way you want.
That is use .square:hover div:nth-child(2):after instead of .square:hover div:nth-child(2) only

It works like this see below snippet :

body {
  background-color: aquamarine;
}

.square {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: azure;
  position: relative;
  transition: 1s transform;
}

.square:hover {
  transform: scale(4);
}

.div1::after {
  position: absolute;
  content: "MENU";
  right: 27px;
  top: 40px;
}

.square:hover div:nth-child(1) {
  opacity: 0;
}

.div2::after {
  content: "- Google";
  position: absolute;
  bottom: 25px;
  right: 5px;
  font-size: 10px;
  border: 2px solid grey;
  padding: 2px;
  opacity: 0;
}

.square:hover div:nth-child(2):after {
  opacity: 1;
}

.div3::after {
  content: "- Youtube";
  position: absolute;
  bottom: 2px;
  right: 5px;
  font-size: 10px;
  border: 2px solid grey;
  padding: 2px;
  opacity: 0;
}

.square:hover div:nth-child(3):after {
  opacity: 1;
}

<div class="square">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</div>

score 0 · Answer 2 · answered Aug 26 '21 at 13:16

I changed your code a bit. See if this does what you need:

I added transform-origin: top left; to prevent the scaling from happening in all directions which caused some of the element to be displayed outside of the viewport.

I got rid of the :after pseudo-elements as they did not contribute to the desired outcome and only complicated things (in my opinion).

CSS body {
  background-color: aquamarine;
}

.options {
  height: 100px;
  margin-top: 5px;
  display: none;
}

.options>div {
  border: 2px solid gray;
  margin-bottom: 4px;
}

.square {
  width: 100px;
  height: 100px;
  border: 1px solid gray;
  border-radius: 10px;
  background-color: azure;
  position: relative;
  transition: 1s transform;
}

.square:hover {
  transform-origin: top left;
  transform: scale(4);
}

.menu {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.square:hover .options {
  display: block;
  font-size: 10px;
  padding: 2px;
}

.square:hover .menu {
  display: none;
}

<div class="square">
  <div class="menu">Menu</div>
  <div class="options">
    <div class="div2">Google</div>
    <div class="div3">You Tube</div>
  </div>
</div>

Why does the opacity not work when I hover over the square?

2 Answers2