使用jQuery将悬停效果添加到同一类的不同div中的特定元素

Question

I have a grid of images all have the same class (which I would like to toggle when you hover over the image. These images are pull from a mongo database.

Here is my HTML (using ejs to do the logic to loop through all images on the database)

 <div class="ui two column padded stackable center aligned grid">
  <% videos.forEach(function(video){ %>
    <div class="column">
      <div class="ui fluid inverted segment">
        <img class="ui rounded image" src="<%= video.thumbnail %>" href="/videos/<%= video._id %>">
        <div class="textbox hidden">
          <div class="description"><%= video.description %></div>
        </div> 
      </div>
    </div>
  <% }); %>
</div>

I am trying to toggle the hidden class on textbox div, so the text pops out the bottom (also using semantic-UI for some styling)

Here is my jQuery

$(".image").hover(function(){
$(".textbox").removeClass("hidden");
}, function(){
$(".textbox").addClass("hidden")

});

here is an image of the sort of thing I want to achieve (only different the text appears when you hover on the image)

Thanks Miles

Edit: The answer below works wonderfully however I would like to animate the hover effect, at the moment it is just changing from display: none; to display: block; How do I animate this so it fades in/out? Miles

Answer 1

Updated answer:

Showing and hiding the text while animating can be achieved using a different approach, whereby you can change the margin of the text on hover and attaching an animation effect of your choice.

For a fade in/out animation see the answer by @Kris, which makes use of opacity rather than margin.

Good article on CSS transitions: https://css-tricks.com/almanac/properties/t/transition/

 .segment { position: relative; } .segment img.image { position: relative; z-index: 10; } .segment .textbox.hidden { position: relative; z-index: 5; transition: ease-out 0.5s; margin-top: -30px; } .segment:hover .textbox.hidden { margin-top: 0; } 

 <div class="ui two column padded stackable center aligned grid"> <div class="column"> <div class="ui fluid inverted segment"> <img class="ui rounded image" src="http://www.skrenta.com/images/stackoverflow.jpg" href="/videos/<%= video._id %>"> <div class="textbox hidden"> <div class="description">Video Description</div> </div> </div> </div> </div> 

Original answer:

You don't need JavaScript or jQuery to achieve this. It can be done with CSS alone. The text can be hidden by default and you can then define a rule that on the parent hover, the child text will be shown.

Have a look at the code:

 .hidden { display: none; } .segment:hover .hidden { display: block } 

 <div class="ui two column padded stackable center aligned grid"> <div class="column"> <div class="ui fluid inverted segment"> <img class="ui rounded image" src="http://www.skrenta.com/images/stackoverflow.jpg" href="/videos/<%= video._id %>"> <div class="textbox hidden"> <div class="description">Video Description</div> </div> </div> </div> </div> 

Answer 2

The animation should work if you start at opacity:0 and set opacity:1 when you hover over the segment. Here's an example:

HTML:

<div class = "segment">
  <h1>Hi There!</h1>
  <p class = "hidden">This is hidden</p>
</div>

CSS:

.hidden{
  opacity:0;
  transition: 1s linear;
}

.segment:hover .hidden{
  opacity:1;
}