Question: As I said in title my problem is I can't hover just one element. I gave some effect but each element is affected. I know it's a simple question and I search google and stackoverflow, I found. But any solution is working. 

İn the codes are here: <https://jsfiddle.net/dty0wth0/>

Also I tried that too: 

```
  $("section#box").mouseenter(function() {
             $('section#box span').css({'transition':'1s','top':'80px'}); 
        }).mouseleave(function() {
              $('section#box span').css({'transition':'1s','top':'-80px'}); 
        });

```

Thanks for helping.

Answer: 
You have an addressing problem.

This hovers the div (entire image), and only works with the span.

```
$("section#box div").hover(
   function() {
      $('span', this).css({'transition':'1s','top':'80px'})
   }, 
   function() {
    $('span', this).css({'transition':'1s','top':'-80px'}); 
   }
);

```

Although, frankly, this should just use CSS transitions entirely:

```
section#box div {
    position: relative;
}

section#box div span {
    top: -80px;
    transition: all 1s;
    position: absolute;
}

section#box div:hover span {
    top: 80px;
}

```
You should add the span to your main selector then your mouseenterer and mouseleave will be wrapped in that context.

```
$("section #box span").mouseenter(function() {
             $(this).css({'transition':'1s','top':'80px','text-size':'25px'}); 
        }).mouseleave(function() {
              $(this).css({'transition':'1s','top':'-80px','text-size':'12px'}); 
        });

```