Hacer efecto de transición sobre bloque con dos imágenes
Publicado por José Carlos (2 intervenciones) el 04/08/2022 10:20:43
Hola.
Estoy intentando realizar un efecto de transición dentro de un artículo que contiene un enlace general con textos e imágenes. El efecto de transición sería sobre la imagen, solo que al tener una imagen con degradado como diseño justo encima de la imagen a la que quiero hacer la transición no consigo hacerlo.
Si del código html elimino el filtro degradado la transición se hace correctamente <span class="main-article__filter"></span> pero claro es una parte del diseño que me piden y tengo que dejar.
¿Qué otra opción podría intentar?
Saludos.
Estoy intentando realizar un efecto de transición dentro de un artículo que contiene un enlace general con textos e imágenes. El efecto de transición sería sobre la imagen, solo que al tener una imagen con degradado como diseño justo encima de la imagen a la que quiero hacer la transición no consigo hacerlo.
1
2
3
4
5
6
7
8
9
10
11
12
<article class="main-article-blog">
<a class="blog-link main-article__meta" href="/blog/cómo-preparar-una-pared-para-pintarla?">
<span class="main-article__filter"></span> <!-- Imagen que contiene el degradado -->
<section class="text-block">
<span class="main-article__date">04/08/2022</span>
<h1 class="main-article__title" >
¿Título entrada del blog?</h1><p class="main-article__description">Descripción del artículo principal de las entradas del blog.</p>
</section>
<img src="https://via.placeholder.com/300" alt="Título">
</a>
</article>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.main-article-blog {
height: 440px; overflow: hidden;transition: all .25s ease;
width: 300px;position: relative; /*Obligatorio*/
}.main-article-blog .main-article__filter { /*Filtro sobre imagen y textos*/
background: linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.6) 35%,transparent 50%,transparent);
height: 100%;
position: absolute; top: 0; left: 0;width: 100%;
}.main-article-blog .text-block {
position: absolute; bottom: 20px; left: 0px;text-align: center;
background-color: black;
color: white;transition: all .25s ease;
}.main-article-blog img {
height: 440px; border: 1px solid orange;transition: all .45s ease-out;
}.main-article-blog img:hover {
width: auto; height: 470px;}Si del código html elimino el filtro degradado la transición se hace correctamente <span class="main-article__filter"></span> pero claro es una parte del diseño que me piden y tengo que dejar.
¿Qué otra opción podría intentar?
Saludos.
Valora esta pregunta
0