How can I add animations to my images in my Django app? - html

Question

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.
I tried adding some code in my CSS but the image won't change
Thank you for your help.
My index.html
{%block contenido %}
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 1 %}
<img src={{p.urlPortada}} width="289" height="289"/></li>
{% endif %}
{% endfor %}
</div>
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 2 %}
<img src={{p.urlPortada}} width="289" height="289"/></li>
{% endif %}
{% endfor %}
</div>
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 3 %}
<img src={{p.urlPortada}} width="289" height="289"/></li>
{% endif %}
{% endfor %}
</div>
{% endblock %}
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.
my CSS
#container{
width: 290px;
overflow: hidden;
margin: 5px 4px 0 auto;
padding: 0;
background: #222; /* FONDO DEL RECTANGULO CONTENEDOR */
border: 3px solid #8E1600;
float: left;
}
I added this new lines to my CSS but the image won't change.
.foto_pelicula > img:hover {
transform: scale(1.1);
}
Maybe I'm not using the proper lines in the CSS as I'm a junior programmer.
Help is much appreciated

Answer 1

This question has no connection to Django. In future try to create working html template for your purposes and then add it to django template.
You setup .foto_pelicula > img:hover to transform image. But > selector finds only direct child. See documentation on selectors.
And in your code direct child is a, but not img. Therefore you don't see result. You can change your css rule to .foto_pelicula > a > img:hover
See demo:
#container{
width: 290px;
overflow: hidden;
margin: 5px 4px 0 auto;
padding: 0;
background: #222; /* FONDO DEL RECTANGULO CONTENEDOR */
border: 3px solid #8E1600;
float: left;
}
.foto_pelicula > a > img:hover {
transform: scale(1.1);
}
<div id="container" class="foto_pelicula">
<img src="https://via.placeholder.com/289" width="289" height="289"/>
</div>
IMPORTANT
In your html code I see several divs with id="container". You can setup only one id with certain name to each page. That's why it called identifier.
So change your ids to classes or give different id names for this divs.