Shutdown effect on an image with Jquery

Question

Shutdown effect on an image with Jquery

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have a slideshow the fact is that the images are very bright and what I need is that when I upload an image to the seconds, just before the text appears, a background is placed on top of the image as a background , I did but I want to do it in seconds try with animate of jquery , and transition of css but I can not do it here I send you the code

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>

The code javascript let's say it's the code you use just change the image, so that could make the modification the issue is that the div is perfect because it has a black background and the letters are appreciated, but What I need is for that background to be placed in seconds, not instantly, that is, I want the Linear-gradient to work within seconds of having loaded that image.

javascript jquery css slider

asked by Carlos Estarita 22.02.2018 в 02:16

source

2 answers

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>

Here is an example of how you can do it

answered by 22.02.2018 в 02:51

Selector this + option Requested bean is currently in creation: Is there an unresolvable circular reference?

score 2 · Accepted Answer

I think I understood that you want to achieve, you can pass that gradient to a pseudo element, in this case it can be: before and you add to the latter the animation to appear after 0.3s of the image appears. Example:

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>