时间戳

首页 > 解决方案 > 如何在我的 Django 应用程序中为我的图像添加动画？

html - 如何在我的 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 是我从互联网上获取的网址，我想它们是从互联网上获取还是存储在您的项目中并不重要。

我的 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 中使用正确的行，因为我是一名初级程序员。

非常感谢帮助

标签： htmlcssdjango

解决方案

这个问题与 Django 无关。将来尝试为您的目的创建工作 html 模板，然后将其添加到 django 模板。

您设置.foto_pelicula > img:hover转换图像。但是>选择器只找到直接的孩子。请参阅有关选择器的文档。

而在您的代码中，直接孩子是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>

重要的

在您的 html 代码中，我看到几个带有id="container". 您只能为每个页面设置一个具有特定名称的 id。这就是为什么它称为标识符。

因此，将您的 id 更改为类或为此 div 提供不同的 id 名称。

推荐阅读