How can i activate .hover() function only on one element at time

Question

I have a problem with using the function .hover (). it is a simple hover effect that slide in a div with some content, the problem is that i have more than one div in the page with thew same classes and This function animates all items at once, not just the one on which the muose step, how can I fix it? Thanks in advance this is my code

html:

<div class="col-lg-4 col-md-4 col-sm-6 progetto hidden-xs">
    <div class="box-progetto-image">
        <?php the_post_thumbnail(); ?>
        <h2 class="titolo-progetto"><?php the_title(); ?></h2>
    </div>
    <div class="container-meta">
        <div class="container-cerchi">
            <a class="cerchio-progetto" href="<?php echo get_post_meta(get_the_ID(), 'yiw_progetti_link', true); ?>" title="<?php the_title(); ?>" rel="nofollow" target="_blank">
                <img src="<?php bloginfo('template_url'); ?>/img/link.png" alt="Visita il sito">
            </a>
            <a class="cerchio-progetto" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <img src="<?php bloginfo('template_url'); ?>/img/plus.png" alt="Maggiori informazioni">
            </a> 
        </div>
        <div class="layout-image">
            <?php  if (class_exists('MultiPostThumbnails')) : 
                MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'layout-image');
            endif; ?>
        </div>
    </div>
</div>

ad this is my jQuery :

script>

$(document).ready(function() {

    $('.progetto').hover(function() {
        $('.container-meta').css('right', '0');
        $('.titolo-progetto').css('opacity' , '0')
    }, function() {
        $('.container-meta').css('right', '100%');
        $('.titolo-progetto').css('opacity' , '1')
    });

});

Answer 1

The problem is that you are using a selector that will find all elements with the same class. You can use the element that the event is triggered on as context for the search, that way the selector will only find elements inside it:

$(document).ready(function() {

    $('.progetto').hover(function() {
        $('.container-meta', this).css('right', '0');
        $('.titolo-progetto', this).css('opacity' , '0')
    }, function() {
        $('.container-meta', this).css('right', '100%');
        $('.titolo-progetto', this).css('opacity' , '1')
    });

});