CSS/jQuery - Texte sur l'image lors du vol stationnaire

Question

J'ai une fonction de survol qui place le texte sous l'image lorsque je le survole. Mais je veux que le texte soit sur (sur) l'image. Afin que nous vous survoler l'image va disparaître un peu et le texte s'affichera.

Comme ceci:

Quelqu'un peut-il s'il vous plaît me aider?

Voici le jQuery:

<%def name="javascript()"> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     $('.category-box').each(function() { 
      var hovertext = $(this).find('.hovertext').html(); 
      var hoverbox = $('<div id="hoverbox">' + hovertext + '</div>').css({ 
       'position': 'absolute', 
       'top': $(this).css('top'), 
       'left': $(this).css('left'), 
       'width': $(this).css('width'), 
       'background-color': '#f0f0f0', 
       'z-index': 1000, 
       'border-radius': '5px', 
       '-moz-border-radius': '5px', 
       '-webkit-border-radius': '5px', 
       'display': 'none', 
       'cursor': 'pointer' 
      }); 

      $(this).find('h4').after(hoverbox); 

      $(this).hover(function() { 
       hoverbox.fadeIn('fast'); 
      }, function() { 
       hoverbox.fadeOut('fast'); 
      }); 

      $(this).not('#mitp').click(function() { 
       location.href = '${request.route_url(' 
       new_case ', category=' 
       ')}' + $(this).find('h4').html(); 
      }); 
     }); 

     $('#mitp').click(function() { 
      location.href = '${request.route_url(' 
      mitp ')}'; 
     }); 
    }); 

Le Mako:

% if categories: 

% for category in categories: 
    <div class="category-box"> 
     <img src="/category_icon/${category['id']}" width="120" height="120" /> 
     <h4>${category['name']}</h4> 
     <span class="hovertext"> 
     % if category['description'] != '.': 
      ${h.literal(category['description'])} 
     % endif 
     </span> 
    </div> 
% endfor 
% endif 

Et le CSS:

.category-box { 
    float: left; 
    margin: 15px 10px 5px 10px; 
    text-align: center; 
    width: 120px; 
    min-height: 120px; 
    cursor: pointer; 
} 

.category-box:hover { 
    cursor: pointer; 
    background-color: #f0f0f0; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

.hovertext { 
    text-align: center; 
    display: none; 
} 

Answer 1

Il y a quelques problèmes avec votre code:

1. Vous utilisez <div id="hoverbox"> pour y insérer des éléments musltiple, mais cela signifie que vous avez IDs dupliqués dans votre document, ce qui est valide html
2. .category-box devrait avoir position: relative; que vous pouvez placer les éléments enfants correctement avec position: absolute
3. Avec les points ci-dessus, vous pouvez simplement ajouter à votre 'top': 0, 'left': 0,hoverbox

Dans votre code $(this).css('top') renverra simplement la valeur auto qui n'a pas d'effet ici.

---

Example

Answer 2

.hover { 
 
    display: none; 
 
    position: absolute; 
 
    margin: -150px 0px 0px 90px; 
 
    width:90px; 
 
    z-index:1; 
 
} 
 
.hover-content:hover .hover { 
 
    display: block; 
 
} 
 
.hover-content:hover img { 
 
    opacity: 0.4; 
 
}

<div class="hover-content" style="display:inline-block;"> 
 
<img src="http://i.stack.imgur.com/e3zYD.jpg"> 
 
<div class="hover"> 
 
Your text here man! 
 
</div> 
 
</div> 
 
<div class="hover-content" style="display:inline-block;"> 
 
<img src="http://i.stack.imgur.com/e3zYD.jpg"> 
 
<div class="hover"> 
 
Your text here man! 
 
</div> 
 
</div>