CODEWITHSUNDEEP
csstextjquery-pluginshover
user2696258
user2696258

Reputation: 1189

Text on Hover an image in Css

Hey guys I'm trying to implement Paper unfoding effect in a webpage of a wesite I'm developing. Im using the pfold jquery plugin, but I want a text to appear on hover and I did it many times but doesnt work. Here is my code:

HTML:

<div class="uc-container">
   <div class="uc-initial-content">
<!--<img src="fm.png" alt="FM" /> -->

<img src="fm.png" alt="Fm" title="Fm" id="hoverFm">
<p class="textSponsor">92.7 BIG FM</p>

<span class="icon-eye"></span>
</div>
<div class="uc-final-content">
<img src="fm.png" alt="FM" /> 

    <div class="title"><h4>FM</h4> <a href="http://drbl.in/dMLS" class="icon-link"></a></div>
<span class="icon-cancel"></span>
</div>
</div>

And This is the CSS For same:

#hoverFm .textSponsor{
position: relative;
margin-right: auto;
margin-left: auto;
visibility: hidden;
}

#hoverFm:hover .textSponsor{
visibility: visible;
}

When Im doing this the text just simply comes below my picture . I'm not getting where I'm going wrong. And when I'm creating a new div which contains only <img> and <p> tag then my image is getting small (I guess its because of the code I wrote for resizing and paper folding effect which is gettin hampered due to this and then also text on hover is not coming)

If you guys wanna see what actually I'm making :

The link to the demo site is: http://tympanus.net/Development/PFold/index3.html

and the code for same is available at link: http://tympanus.net/codrops/2012/10/17/pfold-paper-like-unfolding-effect/comment-page-2/#comment-450779

And the github link for code is: https://github.com/codrops/PFold

I tried it a lot to figure out but was unable so please help someone. It will really be appreciated. Thanks in Advance!!

Upvotes: 0

Views: 509

Answers (1)

Jakub Kotrs
Jakub Kotrs

Reputation: 6229

#hoverFm:hover .textSponsor

This does never really happen, because .textSponsor is not a child of #hoverGM, it is a sibling. You need to use the next selector, which is +:

#hoverFm:hover + .textSponsor

You could also change the structure to

<div class="uc-initial-content" id="hoverFm">
    <img src="fm.png" alt="Fm" title="Fm">
    <p class="textSponsor">92.7 BIG FM</p>

Then your original selector would work because now it really is a child.

Upvotes: 1

Related Questions