如何在我的Django应用程序的图像中添加动画？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在我的Django应用程序的图像中添加动画？相关的知识，希望对你有一定的参考价值。
[我正在尝试为我的Django应用中的某些图像添加一种动画，我想要做的是，当用户在图像周围移动鼠标时，它会变得更大。
我尝试在CSS中添加一些代码，但是图像不会改变
谢谢您的帮助。
我的index.html
{%block contenido %}
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 1 %}
<a href="{% url 'detallesPelicula' p.id %}"><img src={{p.urlPortada}} width="289" height="289"/></a></li>
{% endif %}
{% endfor %}
</div>
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 2 %}
<a href="{% url 'detallesPelicula' p.id %}"><img src={{p.urlPortada}} width="289" height="289"/></a></li>
{% endif %}
{% endfor %}
</div>
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 3 %}
<a href="{% url 'detallesPelicula' p.id %}"><img src={{p.urlPortada}} width="289" height="289"/></a></li>
{% endif %}
{% endfor %}
</div>
{% endblock %}图像SRC是我从互联网上获取的网址，我想它们是从互联网上获取还是存储在您的proyect中都没有关系。
我的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;
} 我将这些新行添加到CSS中，但是图像不会改变。
.foto_pelicula > img:hover {
transform: scale(1.1);
}也许我是初级程序员，所以在CSS中使用的行不正确。
非常感谢您的帮助
答案
此问题与Django没有关系。将来尝试创建适合您目的的html模板，然后将其添加到django模板。
您设置.foto_pelicula > img:hover以变换图像。但是>选择器仅查找直接子级。参见documentation on selectors。
并且在您的代码中直接子级是a，但不是img。因此，您看不到结果。您可以将CSS规则更改为.foto_pelicula > a > img:hover
请参见演示：
#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">
<a href="#"><img src="https://via.placeholder.com/289" width="289" height="289"/></a>
</div>以上是关于如何在我的Django应用程序的图像中添加动画？的主要内容，如果未能解决你的问题，请参考以下文章