title: If the mouse move over the picture then do something? Javascript Jquery
body: <p>I'm trying to put some cool effects on my website.. now I want the user to choose a topic. Now I have 4 topics and found 4 cool pictures I want them as a "picture link". For example : </p>
  
  <pre><code>&lt;a href="{{ action('Test\\TestController@add', [1]) }}"&gt;
      &lt;img src="/pictures/Gaming.jpg" alt="Gaming" style="width:280px;height:228px;"&gt;
  &lt;/a&gt;
  
  &lt;a href="{{ action('Test\\TestController@add', [2]) }}"&gt;
      &lt;img src="/pictures/Gesundheit.jpg" alt="Gesundheit" style="width:280px;height:228px;"&gt;
  &lt;/a&gt;
  
  &lt;a href="{{ action('Test\\TestController@add', [3]) }}"&gt;
      &lt;img src="/pictures/Allgemeines.jpg" alt="Allgmeines" style="width:280px;height:228px;"&gt;
  &lt;/a&gt;
  
  &lt;a href="{{ action('Test\\TestController@add', [4]) }}"&gt;
      &lt;img src="/pictures/Technik.jpg" alt="Technik" style="width:280px;height:228px;"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Now I want something like, if the user move his mouse over the picture, then the picture should get some brighter and then there should be written the name of the blog </p>
  
  <p>like if I'm moving my mouse over the gaming image, then the image gets brighter and in the middle stands Gaming. Well, I'm still learning javascript/Jquery but never did something like this.</p>
  
  <p>Can someone help me there? </p>
  
  <p>Thanks for any help! </p>
  
  <p>My try: </p>
  
  <pre><code>&lt;script&gt;
      $( ".imgClass" )
      .mouseenter(function() {
      console.log("Enter to "+$(this));
      })
      .mouseleave(function() {
      console.log("Leave to "+$(this));
      });
      &lt;/script&gt;
  
  &lt;a href="{{ action('Test\\TestController@add', [1]) }}"&gt;
          &lt;img class=".imgClass" src="/pictures/Gaming.jpg" alt="Gaming" style="width:280px;height:228px;"&gt;
      &lt;/a&gt;
  </code></pre>