title: How can I add animations to my images in my Django app?
body: <p>I´m trying to add a kind of animation to some images in my Django app, what I want to do is that when the user moves the mouse around the image it gets bigger.</p>
  
  <p>I tried adding some code in my CSS but the image won't change</p>
  
  <p>Thank you for your help.</p>
  
  <p>My index.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    {%block contenido %}
  
      &lt;div id="container" class="foto_pelicula"&gt;
       {% for p in peliculas %}
        {% if p.genero.id == 1 %}
        &lt;a href="{% url 'detallesPelicula' p.id %}"&gt;&lt;img src={{p.urlPortada}} width="289" height="289"/&gt;&lt;/a&gt;&lt;/li&gt;
        {% endif %}
       {% endfor %}
     &lt;/div&gt;
     &lt;div id="container" class="foto_pelicula"&gt;
       {% for p in peliculas %}
       {% if p.genero.id == 2 %}
       &lt;a href="{% url 'detallesPelicula' p.id %}"&gt;&lt;img src={{p.urlPortada}} width="289" height="289"/&gt;&lt;/a&gt;&lt;/li&gt;
       {% endif %}
      {% endfor %}
     &lt;/div&gt;
     &lt;div id="container" class="foto_pelicula"&gt;
       {% for p in peliculas %}
        {% if p.genero.id == 3 %}
        &lt;a href="{% url 'detallesPelicula' p.id %}"&gt;&lt;img src={{p.urlPortada}} width="289" height="289"/&gt;&lt;/a&gt;&lt;/li&gt;
        {% endif %}
       {% endfor %}
     &lt;/div&gt;
      {% endblock %}</code></pre>
  </div>
  </div>
  </p>
  
  <p>The Images SRCs are urls that I take from the internet, I guess it does not really matter whether they are taken from the internet or stored in your proyect.</p>
  
  <p>my CSS</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container{ 
         width: 290px;
         overflow: hidden;
         margin: 5px 4px 0 auto;
         padding: 0;
         background: #222; /* FONDO DEL RECTANGULO CONTENEDOR */
         border: 3px solid #8E1600;
         float: left;
  } </code></pre>
  </div>
  </div>
  </p>
  
  <p>I added this new lines to my CSS but the image won't change.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.foto_pelicula &gt; img:hover {
      transform: scale(1.1);
   }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Maybe I'm not using the proper lines in the CSS as I'm a junior programmer.</p>
  
  <p>Help is much appreciated</p>