1

tengo un slideshow el caso es que las imágenes son muy brillantes y lo que necesito es que cuando cargue una imagen a los segundos, justo antes que aparezca el texto se coloque un fondo encima de la imagen como un background, lo hice pero quiero hacerlo en segundos intente con animate de jquery, y transition de css pero no logro hacerlo acá les mando el código

if(g.hasClass("slider_thumbs")){ // Esta haciendo el cambio de imagen
var k=$j("div.item").index($j("div.item.active")[0])+1 // Para saber cuando cambia de imagen en el slider 
$j("div.item.active").addClass("element_hovered"); 
}
<div id="image_1" class="image" style="
                        background-image: 
                        linear-gradient(
                          rgba(0, 0, 0, 0.3),
                          rgba(253, 249, 249, 0.3)
                        ),
         url(img/widget3/Widget-3.jpg); background-  size:cover">
			</div>

El código javascript digamos que es el código que utiliza apenas cambie de imagen, por lo que ahí podría hacer la modificación el tema es que el div esta perfecto porque tiene un fondo negro y se aprecia las letras, pero lo que necesito es que ese fondo se coloque en segundos, no al instante, es decir quiero que el Linear-gradient funcione a los segundos de haber cargado dicha imagen

2
  • creo que seria mas sencillo hacerlo solo con css Commented el 22 feb. 2018 a las 1:26
  • Pues, necesito que el css pase despues de que cargue la imagen, asi que alguna idea? Commented el 22 feb. 2018 a las 1:27

2 respuestas 2

2

Creo que entendí que quieres lograr, puedes pasar ese gradiente a un seudoelemento, en este caso puede ser: before y le añades a este ultimo la animación para que aparezca después de 0.3s de que aparezca la imagen. Ejemplo:

if(g.hasClass("slider_thumbs")){ // Esta haciendo el cambio de imagen
var k=$j("div.item").index($j("div.item.active")[0])+1 // Para saber cuando cambia de imagen en el slider 
$j("div.item.active").addClass("element_hovered"); 
}
body{margin: 0;}

.image{
  width: 100%;
  height: 100vh;
  background-image: url(http://picsum.photos/1200/900); 
  background-size: cover;
  background-position: center;
  position: relative;
}

.image::before{
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(253, 249, 249, 0.5)
  );
  opacity: 0;
  animation: aparecer ease 1s both .3s;
}

@keyframes aparecer{
  to { opacity: 1;} 
}
<div id="image_1" class="image">
			</div>

1
  • Muchas gracias Edgar, eso era lo que estaba buscando exactamente Commented el 22 feb. 2018 a las 21:13
0

	.image {
		width: 500px;
		height: 500px;
		position: relative;
	}
	.image img {
		width: 100%;
		height: 100%;
	}
	.image p {
		bottom: 0;
		padding: 20px 0;
		position: absolute;
		opacity: 0;
		background: rgba(0, 0, 0, .7);
		color: #fff;
		width: 100%;
		text-align: center;
		transition: all .4s ease-in-out;
	}
	.image:hover > p {
		opacity: 1;
	}
<div class="image">
	<img src="https://images.unsplash.com/photo-1508182390781-8dd476c3237c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=eeb978f1ebd12334e7b08117fcaad01d&auto=format&fit=crop&w=751&q=80" alt="Image Numero 1">
	<p>image numero 1</p>
</div>

Te dejo un ejemplo de como puedes hacerlo

1
  • Hola Eddy, las publicaciones que son sólo código se consideran de baja calidad. Por favor, añade una pequeña descripción con lo que has hecho y por qué funciona. Lee Cómo responder para más información y consejos.
    – Alvaro Montoro
    Commented el 22 feb. 2018 a las 3:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.