How to access a selector inside another in jquery?

Two things:

First, putting the jQuery code in the JSFiddle Javascript block is a crime. If you look at the top left corner of Fiddle, you have an option there to automatically include jQuery;)

Second: You can fetch elements that are descendants of another element. Once you have declared the event for all elements of the content class:

$('.content').mouseenter(function() {
   $(this).animate({
       width: '+=750px',
       opacity: '+=0.65'
   });

   $('.contentParagraph').fadeTo('fast',1);
});

You can replace the statement in the last line with:

$(this).find('.contentParagraph').fadeTo('fast',1);

The find method finds the descendants of the element it's called in, that meet the search condition you pass . But this is not efficient. You will do a search every time you fire the event. In your case are few elements and may even be fast, but if one day your HTML swells, this can degrade performance.

I can think of some alternatives you can try:

Create a dictionary of ids of elements of classes content for elements of class contentParagraph . Something like:

var contentDictionary: {
    content1: $("#paragraph1"),
    content2: $("#paragraph2"),
    content3: $("#paragraph3")
    /**etc., etc./
}

Hence your event would look something like:

$('.content').mouseenter(function() {
    var that = $(this);
    that.animate({
        width: '+=750px',
        opacity: '+=0.65'
    });

   contentDictionary[that.id].fadeTo('fast',1);
});

The second alternative is to give an extra class to the content within the mouseenter event, and to take that extra class in the mouseleave event. Then you apply different visibility to contentParagraph according to the parent element class.

And there's one that requires less effort yet. Make contentParagraph the same size as content . Then use the mouseenter and mouseleave event in contentParagraph , not content ;) from contentParagraph , you can get the content of it by using the parent of jQuery. So:

var content = $(this).parent();

This is much more efficient than find . Good luck there!

I leave a new answer, already after having an accepted answer, because this is possible only with CSS . And how much less jQuery better.

You can use transitions in CSS, and add:

transition: width .8s, opacity .5s;  // no .content com transições de 0,8 e 0,5 segundos

opacity: 0;
transition: opacity 1s; // no .contentParagraph com uma transição de 1 segundo

And then add new CSS to define how to .content and .contentParagraph when .content has :hover

/* novo CSS */
 .content:hover {
    width: 900px;
    opacity: 0.65;
}
.content:hover .contentParagraph {
    opacity: 1;
}

Demo: link

I made an example in JSFiddle and completed the other div 's with text to illustrate.

// troque pela linha abaixo
$('.contentParagraph').fadeTo('fast',0)

// Para ele aplicar o efeito no elemento interno 'p'
$(this).children("p").fadeTo('fast',1)

You can also change the following.

In the script, remove:

$('.contentParagraph').hide()

In CSS, apply style:

.contentParagraph{display:none}