CODEWITHSUNDEEP
htmlcss
jmc
jmc

Reputation: 131

How can I show text that is hidden on mouseover?

This is my HTML:

<div id="clients">
<h1> Clients </h1>
<div class="mnlaownrs">
  <img src="img/img.png" width="226" height="" alt="manilaowners"></img><br>
  <a href="#" class="mnlacaption">
    <h4>ManilaOwners</h4>
  </a>
</div>
<br>

...and this is my CSS:

.mnlaownrs {
    position: relative;
    float: left;
    background-color: #544334;
    height: 82px;
    padding: 3px;
    margin-left: 20px;
}

a.mnlacaption {
    position: absolute;
    bottom: 0;
    width: 236px;
}


a.mnlacaption:hover {
    position: absolute;
    bottom: 3px;
    width: 236px;
    height: 86px;
    background: rgba(0,0,0,.90);
    text-indent: center;
    visibility: visible;
}

How do I hide the text for .mnlacaption if it's in its normal state, but make it show on hover?

Upvotes: 2

Views: 4907

Answers (4)

Curtis
Curtis

Reputation: 103428

Set the a.mnlacaption to initially be display:none (hidden), then when the containing div, .mnlaownrs, is in hover state, change the style to display:block

.mnlaownrs a.mnlacaption
{
display:none;
}

.mnlaownrs:hover a.mnlacaption
{
display:block;
}

Alternatively if you wish to not affect the rest of your page position when this element is hidden, use visibility instead:

.mnlaownrs a.mnlacaption
{
visibility:hidden;
}

.mnlaownrs:hover a.mnlacaption
{
visibility:visible;
}

Upvotes: 5

Nagarajan
Nagarajan

Reputation: 432

Try this:

.mnlaownrs {
    position: relative;
    float: left;
    background-color: #544334;
    height: 82px;
    padding: 3px;
    margin-left: 20px;
    display: none; 
}

and on :hover make it display: inline.

Upvotes: 0

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175098

a.mnlacaption {

    visibility: hidden;
}
a.mnlacaption:hover {

    visibility: visible;
}

?

Upvotes: 0

Marco Johannesen
Marco Johannesen

Reputation: 13134

a.mnlacaption {
   text-indent:-9999px;
}


a.mnlacaption:hover {
   text-indent:0;
}

Should do the trick :)

Upvotes: 0

Related Questions