need help with something about image galley

[joe313]

ok this might sound like a noob question.. thats because it is.

i really liked smartslider 3 but its too heavy to load especially if im making 5-6 different galleries each with 60-80 images

i found unlimited elements from which they have some simple galleries but all are missing 1 thing

1- blur fit. and what that does is it fits all photos to the frame of the gallery without zooming in on the vertical shots to make them fit and blurs out the sides with the same image

i really want to know how i can i add this effect to the galleries in unlimited elements since they are editable with HTML or CSS. i tried copying the strings from the inspection window on smart slider 3 but nothing worked and its making me pull my hair.

im not a web developer so bare with me please

@Babak

 

[rasesh]

this is the html to archive this filter...

<!-----------------------BACKGROUND BLUR DIV-------------------------->
<div class="bg-image"></div>
<div class="image">
  <img src="http://yesofcorsa.com/wp-content/uploads/2015/10/3119_skyscraper-1024x640.jpg" alt="">
</div>

and the CSS [use the same image for both the divs]

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* The image used */
  background-image: url("http://yesofcorsa.com/wp-content/uploads/2015/10/3119_skyscraper-1024x640.jpg");
 
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position middle of the page/image */
.image { 
  position: absolute;
  top: 50%;
  height:100%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
}
.image>img{
    height:100%
 }

 

[joe313]

this is the html to archive this filter...

<!-----------------------BACKGROUND BLUR DIV-------------------------->
<div class="bg-image"></div>
<div class="image">
  <img src="http://yesofcorsa.com/wp-content/uploads/2015/10/3119_skyscraper-1024x640.jpg" alt="">
</div>

and the CSS [use the same image for both the divs]

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* The image used */
  background-image: url("http://yesofcorsa.com/wp-content/uploads/2015/10/3119_skyscraper-1024x640.jpg");

  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position middle of the page/image */
.image {
  position: absolute;
  top: 50%;
  height:100%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
}
.image>img{
    height:100%
}

thank you for the reply.

i have about 80 images in 6 different galleries, is there a quicker way to do it?

 

[joe313]

this is the temp zip file i exported it from unlimited elements

 

[rasesh]

thank you for the reply.

i have about 80 images in 6 different galleries, is there a quicker way to do it?

I made THIS Hope you it.

 

[joe313]

I made THIS Hope you it.

its great actually thank you very much, but is there a way to have like a film strip at the bottom?

also if i want to put it on my site and use my photos, how should i do it as im using elementor

 

[joe313]

this is the slider i had before from smart slider 3