CODEWITHSUNDEEP
htmlcss
Yel Kizon
Yel Kizon

Reputation: 43

How to hide a content when hovered and show an image only?

When I hover the content, I only want the image to be displayed and the content/text hidden. My code shows here that when I hover the content, the image is visible but the content is also displayed. I tried searching for solutions for this problem but unfortunately, I didn't see any similar problems like this one.

.section-four {
  display: flex;
  justify-content: center;
  height: 100vh;
}
.menu-one {
  position: relative;
  margin-top: 2em;
  width: 25%;
  height: 50%;
}
.menu-content {
  position: absolute;
  width: 100%;
}
.menu-one:hover {
  background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
  max-height: 100%;
  background-repeat: no-repeat;
}
.menu-two {
  position: relative;
  margin-top: 2em;
  width: 25%;
  height: 50%;
  left: 5em;
}
.menu-two:hover {
  background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
  background-repeat: no-repeat;
  max-height: 100%;
}
<section class="section-four">
  <div class="menu-one">
    <div class="menu-content">
      <h2>Menu Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
    </div>
  </div>
  <div class="menu-two">
    <div class="menu-content">
      <h2>Menu Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
    </div>
  </div>
</section>

Upvotes: 0

Views: 42

Answers (2)

Facundo Corradini
Facundo Corradini

Reputation: 3913

add a child selector to the :hover stated and hide it as you please

.section-four {
  display: flex;
  justify-content: center;
  height: 100vh;
}
.menu-one {
  position: relative;
  margin-top: 2em;
  width: 25%;
  height: 50%;
}
.menu-content {
  position: absolute;
  width: 100%;
}
.menu-one:hover {
  background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
  max-height: 100%;
  background-repeat: no-repeat;
}

.menu-one:hover > .menu-content{
  opacity:0; transition:opacity 500ms ease;
}

.menu-two {
  position: relative;
  margin-top: 2em;
  width: 25%;
  height: 50%;
  left: 5em;
}
.menu-two:hover {
  background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
  background-repeat: no-repeat;
  max-height: 100%;
}

.menu-two:hover > .menu-content{
  opacity:0; transition:opacity 500ms ease;
}
<section class="section-four">
  <div class="menu-one">
    <div class="menu-content">
      <h2>Menu Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
    </div>
  </div>
  <div class="menu-two">
    <div class="menu-content">
      <h2>Menu Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
    </div>
  </div>
</section>

Upvotes: 1

j08691
j08691

Reputation: 207890

You can hide the content with:

.menu-one:hover > div.menu-content,
.menu-two:hover > div.menu-content {
  display: none;
}

Example:

.section-four {
  display: flex;
  justify-content: center;
  height: 100vh;
}

.menu-one {
  position: relative;
  margin-top: 2em;
  width: 25%;
  height: 50%;
}

.menu-content {
  position: absolute;
  width: 100%;
}

.menu-one:hover {
  background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
  max-height: 100%;
  background-repeat: no-repeat;
}

.menu-two {
  position: relative;
  margin-top: 2em;
  width: 25%;
  height: 50%;
  left: 5em;
}

.menu-two:hover {
  background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
  background-repeat: no-repeat;
  max-height: 100%;
}

.menu-one:hover>div.menu-content,
.menu-two:hover>div.menu-content {
  display: none;
}
<section class="section-four">
  <div class="menu-one">
    <div class="menu-content">
      <h2>Menu Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
    </div>
  </div>
  <div class="menu-two">
    <div class="menu-content">
      <h2>Menu Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
    </div>
  </div>
</section>

Upvotes: 2

Related Questions