Текст на Hover изображение в Css

Question

Эй, ребята, я пытаюсь реализовать эффект бумажного разложения на веб-странице wesite, которую я разрабатываю. Я использую плагин jQuery pfold, но я хочу, чтобы текст отображался при наведении, и я делал это много раз, но не работает. Вот мой код:

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> 

И Это CSS Для этого же:

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

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

Когда Im делает этот текст просто приходит ниже моей картины. Я не понимаю, где я ошибаюсь. И когда я создаю новый div, который содержит только теги <img> и <p>, тогда мое изображение становится маленьким (я думаю, его из-за кода, который я написал для изменения размера и эффекта сгибания бумаги, который из-за этого затрудняется, а затем текст парения не приходит)

Если вы, ребята, хотите увидеть, что на самом деле я делаю:

ссылка на демо-сайт: http://tympanus.net/Development/PFold/index3.html

и код же доступен по ссылке: http://tympanus.net/codrops/2012/10/17/pfold-paper-like-unfolding-effect/comment-page-2/#comment-450779

И ссылка github для кода есть: https://github.com/codrops/PFold

Я пробовал это много, чтобы выяснить, но не смог, пожалуйста, помогите кому-нибудь. Это действительно будет оценено. Заранее спасибо!!

Answer 1

#hoverFm:hover .textSponsor 

Это действительно никогда на самом деле произошло, потому что .textSponsor не ребенок из #hoverGM, это брат. Вы должны использовать следующий селектор, который +:

#hoverFm:hover + .textSponsor 

Вы также могли бы изменить структуру

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

Тогда ваш оригинальный селектор будет работать, потому что теперь это действительно ребенок.