How to make text appear on hover within a div? - html

Question

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/

Answer 1

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>

Answer 2

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>