show hidden span with display:block not working on hover

Question

I have a span on an image which I hide using display:none. Trying to show it with display:block on hover is not working. Can any one help me?

.imagegood {
  position: absolute;
  top: 200px;
  background-color: white;
  color: black;
  padding: 10px;
  font-size: large;
  display: none;
}
.ShowHidden:hover {
  display: block !important;
}

<div style="position:relative; text-align:center;margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-6 col-md-6 col-lg-4 text-center ">
  <a class="ShowHidden" href="#">
    <div>
      <img style="width:100% ; height:auto;" class="img-responsive center-block" src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg" />
      <span class="imagegood">GoodTitle</span>
    </div>


  </a>
  <h3 style="font-weight:bold;" class="h">GoodTitle</h3>
  <h5 class="h">GoodSubText</h5>
</div>

score 1 · Answer 1 · answered Dec 01 '15 at 07:05

Used to this

.ShowHidden:hover .imagegood{
    display:inline-block ;
}

Demo

Code

.imagegood{
    position: absolute;
    top: 200px;
    background-color:white;
    color:black;
    padding:10px;
    font-size:large;
    display:none;
}
.ShowHidden:hover  .imagegood{
    display:inline-block ;
}

<div  style="position:relative; text-align:center;margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-6 col-md-6 col-lg-4 text-center ">
            <a class="ShowHidden" href="#">
                <div>
                    <img style="width:100% ; height:auto;" class="img-responsive center-block" src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg" />
                    <span class="imagegood">GoodTitle</span>
                </div>
                

            </a>
                <h3 style="font-weight:bold;" class="h">GoodTitle</h3>
            <h5 class="h">GoodSubText</h5>
        </div>

Manwal · Accepted Answer · 2015-12-01T07:20:19.917

1

Consider following

.ShowHidden:hover .imagegood{
    display:block;
}

.imagegood{
position: absolute;
top: 100px;
background-color:white;
color:black;
padding:10px;
font-size:large;
transition: 1s all;
opacity: 0;
}
.ShowHidden:hover .imagegood{
    opacity: 1;
}

<div  style="position:relative; text-align:center;margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-6 col-md-6 col-lg-4 text-center ">
        <a class="ShowHidden" href="#">
            <div>
                <img style="width:100% ; height:auto;" class="img-responsive center-block" src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg" />
                <span class="imagegood">GoodTitle</span>
            </div>


        </a>
            <h3 style="font-weight:bold;" class="h">GoodTitle</h3>
        <h5 class="h">GoodSubText</h5>

edited Dec 01 '15 at 07:20

answered Dec 01 '15 at 07:06

Manwal

23,450
12
63
93

thank you dear , I'm new in programming . your codes works fine thanks . I want some transition when it appears . it is possible ? – shm Dec 01 '15 at 07:14
What type of effect you want @shimaamini? – Manwal Dec 01 '15 at 07:15
span appeared a little slowly . it is possible with css ? – shm Dec 01 '15 at 07:16
See updated code @shimaamini i have added animation. Here i am using `opacity` in this. – Manwal Dec 01 '15 at 07:20

score 1 · Answer 3 · edited May 23 '17 at 12:31

1

What I think you should try is visibility: hidden; vs display: none;

display: none; removes it from the page - you can still interact with it in the dev tools, but can't see it where as visibility: hidden has allocated dom space.

see this answer here

edited May 23 '17 at 12:31

Community

1
1

answered Dec 01 '15 at 07:07

richessler

84
6

score 1 · Answer 4 · answered Dec 01 '15 at 07:08

Answer is already given but for your understanding :

If you want to hide and show any element then target that element too like you hide the span so on hove use span also like this .ShowHidden:hover span

If you are hiding div then use div instead of span or you can use class/id name also.

Working Demo

score 0 · Answer 5 · answered Dec 01 '15 at 07:53

0

Why not use JQuery

$(".imagegood")..mouseover(function() {
 $( ".center-block").fadeIn();
});

you can even have it popup for 3sec

 $( ".center-block").fadeIn().delay(3000).fadeOut();

take a look at this link http://api.jquery.com/fadein/

answered Dec 01 '15 at 07:53

user1865560

27
2

show hidden span with display:block not working on hover

5 Answers5