CODEWITHSUNDEEP
htmlcsshover
rossmclenny
rossmclenny

Reputation: 37

How to make text appear on hover within a div?

I am trying to make text appear (with some styling) upon hover. I tried to use display:none; and then with hover display:block; but this hasnt worked.

<div class="container-fluid sub-head">
      <div class="row">
        <div class="col-md left">
          <div class="title">Title</div>
          <div class="overlay">
            <div class="overlay-content">
              <p>
                some text
              </p>
              <p>more text.</p>
            </div>
          </div>
        </div>
        <div class="col-md right">
          <div class="title">other title</div>
        </div>
      </div>
    </div>

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col-md {
  border: solid 1px #6c757d;
  height: 100px;
}

.overlay {
  height: 100%;
  display:none;
}

.overlay:hover {
  display: block;
}

fiddle is here; http://jsfiddle.net/2dyvLf5o/14/

Upvotes: 0

Views: 909

Answers (2)

Nill
Nill

Reputation: 147

If you want to see content of p element (more text), you should define a class name for this element and set hover style to it`s parent div, I also put title inside overlay div

enter code here

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col-md {
  border: solid 1px #6c757d;
}
.overlay{
   height:150px
}

.hidden-content {
  display: none;
}

.overlay:hover .hidden-content{
  display: block;
}
<div class="container-fluid sub-head">
  <div class="row">
    <div class="col-md left">
      <div class="overlay">
        <h1 class="title">Title</h1>
        <div class="overlay-content">
          <p>
            some text
          </p>
          <p class="hidden-content">more text.</p>
        </div>
      </div>
    </div>
    <div class="col-md right">
      <h1 class="title">other title</h1>
    </div>
  </div>
</div>

Upvotes: 2

Daniel Sixl
Daniel Sixl

Reputation: 2499

Use :hover on a parent element, like this:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col-md {
  border: solid 1px #6c757d;
  height: 100px;
}

.overlay {
  height: 100%;
  display: none;
}

.row:hover .overlay {
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid sub-head">
  <div class="row">
    <div class="col-md left">
      <div class="title">Title</div>
      <div class="overlay">
        <div class="overlay-content">
          <p>
            some text
          </p>
          <p>more text.</p>
        </div>
      </div>
    </div>
    <div class="col-md right">
      <div class="title">Other title</div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions