Div that doesnt cover its content

Div that doesnt cover its content - javascript

I have really strange problem.
I have got webpage, that load from ajax second page into Content Div.
The main problem, is that Content div doesn't care about covering all items in him.
There is Code:
.Main_Loaded {
display: flex;
flex-direction: column;
min-width: 99%;
height: auto;
position: absolute;
bottom: 90px;
background-color: grey;
height: auto;
align-self: center;
justify-content: center;
text-align: center;
vertical-align: middle;
z-index: 2;
animation: Colour_Change_Grey;
animation-iteration-count: 1;
animation-duration: 5s;
transition: all 1s;
border-radius: 15px;
}
.Main_Loaded .Title {
margin-top: 30px;
height: 15%;
}
.Main_Loaded .Title span {
font: Serfi;
font-size: 16px;
animation: Show_up;
animation-iteration-count: 1;
animation-duration: 3s;
}
.Main_Loaded .Content {
margin-bottom: 20px;
height: 80%;
display: flex;
flex-direction: row;
}
.Main_Loaded .Content #Image {
min-height: 700px;
width: 45%;
overflow: hidden;
border: 3px solid black;
animation: Show_up;
animation-duration: 3s;
}
.Main_Loaded .Content #Image img {
animation: Show_up;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-delay: 2s;
}
.Main_Loaded .Content #Info {
animation: Show_up;
animation-duration: 3s;
border: 3px solid white;
width: 55%;
}
<div class="Main_Loaded">
<div class="Title">
<span>
Nasza oferta
</span>
</div>
<div class="Content">
<div id="Image">
<div class="owl-carousel">
<img class="img" class="owl-lazy" src="img/1.jpg" />
<img class="img" class="owl-lazy" src="img/2.jpg" />
<img class="img" class="owl-lazy" src="img/3.jpg" />
<img class="img" class="owl-lazy" src="img/4.jpg" />
<img class="img" class="owl-lazy" src="img/5.jpg" />
<img class="img" class="owl-lazy" src="img/6.jpg" />
<img class="img" class="owl-lazy" src="img/7.jpg" />
<img class="img" class="owl-lazy" src="img/8.jpg" />
<img class="img" class="owl-lazy" src="img/9.jpg" />
<img class="img" class="owl-lazy" src="img/10.jpg" />
<img class="img" class="owl-lazy" src="img/11.jpg" />
<img class="img" class="owl-lazy" src="img/12.jpg" />
<img class="img" class="owl-lazy" src="img/13.jpg" />
<img class="img" class="owl-lazy" src="img/14.jpg" />
<img class="img" class="owl-lazy" src="img/15.jpg" />
<img class="img" class="owl-lazy" src="img/16.jpg" />
<img class="img" class="owl-lazy" src="img/17.jpg" />
<img class="img" class="owl-lazy" src="img/18.jpg" />
<img class="img" class="owl-lazy" src="img/19.jpg" />
<img class="img" class="owl-lazy" src="img/20.jpg" />
<img class="img" class="owl-lazy" src="img/22.jpg" />
<img class="img" class="owl-lazy" src="img/21.jpg" />
</div>
</div>
<div id="Info">
dfsdfdsfdsdsadasdasfgjdfklgndfgjbdklfjgnhdklfjghklj
</div>
</div>
</div>
And there is page, to see error.[DELETED]

The Problem is JQuery AJAX.
After copy content into one file, and left code as is, the scripts start working :)

Related

Masonry images design issue with MaterializeCSS "materialboxed" class

I had created masonry images design with pure CSS.
Link here to codepen (only html and css) No materialize CSS and JS
However, I want the effect of `materialboxed` class from materializeCSS
Link to materialbox class from materializeCSS
The problem is that when I add materialboxed class to image, the masonry layout is changed
link to codepen with masonary design + materializeCSS
Expected Result
Actual Result
Expected Result
.gallery {
position: relative;
height: auto;
width: 100%;
margin: auto;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 2vh;
grid-auto-flow: dense;
}
.gallery .img {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.gallery .img:first-child {
grid-column-start: span 2;
grid-row-start: span 2;
}
.gallery .img:nth-child(2n + 3) {
grid-row-start: span 2;
}
.gallery .img:nth-child(4n + 5) {
grid-column-start: span 2;
grid-row-start: span 2;
}
.gallery .img:nth-child(6n + 7) {
grid-row-start: span 1;
}
.gallery .img:nth-child(8n + 9) {
grid-column-start: span 1;
grid-row-start: span 1;
}
.gallery .img img {
height: 100%;
width: 100%;
object-fit: cover;
filter: brightness(0.5) grayscale(100);
transition: all 0.3s ease-in-out;
}
.gallery .img:hover img {
filter: brightness(1) grayscale(0);
}
#media only screen and (max-width: 768px) {
.gallery {
grid-template-columns: auto auto auto;
}
.gallery .img img {
filter: brightness(1) grayscale(0);
}
}
#media only screen and (max-width: 425px) {
.gallery {
display: block;
}
.gallery .img {
display: block;
width: 100%;
height: 100%;
margin: 10px 0;
}
.gallery .img img {
display: block;
filter: brightness(1) grayscale(0);
}
}
<section class="container">
<div class="gallery">
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
</div>
</section>
Example with design not working with class materializedbox
document.addEventListener("DOMContentLoaded", function () {
var elems = document.querySelectorAll(".materialboxed");
M.Materialbox.init(elems);
});
.gallery {
position: relative;
height: auto;
width: 100%;
margin: auto;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 2vh;
grid-auto-flow: dense;
}
.gallery .img {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.gallery .img:first-child {
grid-column-start: span 2;
grid-row-start: span 2;
}
.gallery .img:nth-child(2n + 3) {
grid-row-start: span 2;
}
.gallery .img:nth-child(4n + 5) {
grid-column-start: span 2;
grid-row-start: span 2;
}
.gallery .img:nth-child(6n + 7) {
grid-row-start: span 1;
}
.gallery .img:nth-child(8n + 9) {
grid-column-start: span 1;
grid-row-start: span 1;
}
.gallery .img img {
height: 100%;
width: 100%;
object-fit: cover;
filter: brightness(0.5) grayscale(100);
transition: all 0.3s ease-in-out;
}
.gallery .img:hover img {
filter: brightness(1) grayscale(0);
}
#media only screen and (max-width: 768px) {
.gallery {
grid-template-columns: auto auto auto;
}
.gallery .img img {
filter: brightness(1) grayscale(0);
}
}
#media only screen and (max-width: 425px) {
.gallery {
display: block;
}
.gallery .img {
display: block;
width: 100%;
height: 100%;
margin: 10px 0;
}
.gallery .img img {
display: block;
filter: brightness(1) grayscale(0);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<section class="container">
<div class="gallery">
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
</div>
</section>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

You can add full width and height to material-placeholder to get it working.
document.addEventListener("DOMContentLoaded", function () {
var elems = document.querySelectorAll(".materialboxed");
M.Materialbox.init(elems);
});
.gallery {
position: relative;
height: auto;
width: 100%;
margin: auto;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 2vh;
grid-auto-flow: dense;
}
.gallery .img {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.gallery .img:first-child {
grid-column-start: span 2;
grid-row-start: span 2;
}
.gallery .img:nth-child(2n + 3) {
grid-row-start: span 2;
}
.gallery .img:nth-child(4n + 5) {
grid-column-start: span 2;
grid-row-start: span 2;
}
.gallery .img:nth-child(6n + 7) {
grid-row-start: span 1;
}
.gallery .img:nth-child(8n + 9) {
grid-column-start: span 1;
grid-row-start: span 1;
}
.gallery .img img {
height: 100%;
width: 100%;
object-fit: cover;
filter: brightness(0.5) grayscale(100);
transition: all 0.3s ease-in-out;
}
.gallery .img:hover img {
filter: brightness(1) grayscale(0);
}
.material-placeholder {
position: relative;
width: 100%;
height: 100%;
}
#media only screen and (max-width: 768px) {
.gallery {
grid-template-columns: auto auto auto;
}
.gallery .img img {
filter: brightness(1) grayscale(0);
}
}
#media only screen and (max-width: 425px) {
.gallery {
display: block;
}
.gallery .img {
display: block;
width: 100%;
height: 100%;
margin: 10px 0;
}
.gallery .img img {
display: block;
filter: brightness(1) grayscale(0);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<section class="container">
<div class="gallery">
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
</div>
</section>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Carousel transition end before displaying all content

I'm currently making a carousel that scrolls logos but I have a problem.
If the number of logos is too high, the animation ends before all the logos are displayed.
Is there a way to make all the logos appear before resetting the animation?
Here's an example of my carousel (here it works well because the number of images is small, but if I add more, it's a problem).
#keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-250px * 7))
}
}
.slide-track {
animation: scroll 50s linear infinite;
animation-fill-mode: forwards;
display: flex;
width: calc(250px * 14);
}
Here is a working example in Codepen.
Codepen example

If your slides count is not going to change dynamically, and you are not to use javascript, I recommend you to use your slides count and also the container width in your calculations in order to make the animation work as desired:
$slides-count: 16;
$slide-width: 250px;
$container-width: 960px;
#keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc($container-width - ($slide-width * $slides-count)))
}
}
.slide-track {
animation: scroll 50s linear infinite;
animation-fill-mode: forwards;
display: flex;
width: calc($slides-count * $slide-width);
}

If the number of logos is too high, the animation ends before all the logos are displayed.
according to your code, you'v make sure of tow factors :
adding more logos needs to add it in fallback
for example your slides in HTML structure goes like this:
img1,img2,img3,img4,img1,img2,img3,img4
so to add more logos should be added twice:
img1,img2,img3,img4,img5,img1,img2,img3,img4,img5
Since we added more logo items we have to increase Slide animation number to match how many logos displaying:
#keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-250px * 7 👈👈))}
}
demo example [in this demo I added 17 logo items]:
body {
-webkit-box-align: center;
align-items: center;
background: #E3E3E3;
display: -webkit-box;
display: flex;
height: 100vh;
-webkit-box-pack: center;
justify-content: center;
}
#-webkit-keyframes scroll {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(calc(-250px * 17));
transform: translateX(calc(-250px * 17));
}
}
#keyframes scroll {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(calc(-250px * 17));
transform: translateX(calc(-250px * 17));
}
}
.slider {
background: white;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
height: 100px;
margin: auto;
overflow: hidden;
position: relative;
width: 960px;
}
.slider::before, .slider::after {
background: -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0)));
background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
content: "";
height: 100px;
position: absolute;
width: 200px;
z-index: 2;
}
.slider::after {
right: 0;
top: 0;
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
.slider::before {
left: 0;
top: 0;
}
.slider .slide-track {
-webkit-animation: scroll 10s linear infinite;
animation: scroll 10s linear infinite;
display: -webkit-box;
display: flex;
width: calc(250px * 14);
}
.slider .slide {
height: 100px;
width: 250px;
}
<div class="slider">
<div class="slide-track">
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div> <div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div> <div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
</div>
<div class="slide">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
</div>
</div>
</div>
This is SASS version :
body {
align-items: center;
background: #E3E3E3;
display: flex;
height: 100vh;
justify-content: center;
}
#mixin white-gradient {
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
$animationSpeed: 10s;
// Animation
#keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-250px * 17))}
}
// Styling
.slider {
background: white;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
height: 100px;
margin: auto;
overflow:hidden;
position: relative;
width: 960px;
&::before,
&::after {
#include white-gradient;
content: "";
height: 100px;
position: absolute;
width: 200px;
z-index: 2;
}
&::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
&::before {
left: 0;
top: 0;
}
.slide-track {
animation: scroll $animationSpeed linear infinite;
display: flex;
width: calc(250px * 14);
}
.slide {
height: 100px;
width: 250px;
}
}

Image positioning in image gallery

I'm trying to keep leaderboard/photographer image always right top position even in responsive.
Here is my code
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
img {
position: relative;
overflow: hidden;
top: 0;
left: 0;
opacity: 1;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
padding: 0 20px;
}
.column {
-ms-flex: 25%;
/* IE10 */
flex: 25%;
max-width: 25%;
padding: 10px;
}
.column img {
margin-top: 20px;
vertical-align: middle;
}
#overlay:hover {
overflow: hidden;
top: 0;
left: 0;
opacity: 0.7;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
<html>
<body>
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
</div>
<div class="column">
<a class="js-leaderboard" href="#"><img src="https://i.imgur.com/C5vLv9p.png" id="overlay" style="width:100%"></a>
<img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
</div>
</div>
</div>
</body>
</html>
If you see a pexels website, a leaderboard always keeps positioning the same on the right top. Can I do this? moreover, I have added a class js-leaderboard for this image.

This can be done using order property of flex-items. I have re-ordered the columns in small screens.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
img {
position: relative;
overflow: hidden;
top: 0;
left: 0;
opacity: 1;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
padding: 0 20px;
}
.column {
-ms-flex: 25%;
/* IE10 */
flex: 25%;
max-width: 25%;
padding: 10px;
}
.column img {
margin-top: 20px;
vertical-align: middle;
}
#overlay:hover {
overflow: hidden;
top: 0;
left: 0;
opacity: 0.7;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
order: 3;
}
.row > .column:first-child{
order: 1;
}
.right-top-col{
order: 2;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
<html>
<body>
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
</div>
<div class="right-top-col column">
<a class="js-leaderboard" href="#"><img src="https://i.imgur.com/C5vLv9p.png" id="overlay" style="width:100%"></a>
<img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
</div>
</div>
</div>
</body>
</html>

Gallery Filters, how to use in this example?

Please have a look at Gallery in the following example?
https://w3layouts.com/preview/?l=/domicile-real-estate-category-flat-bootstrap-responsive-web-template/
I want to adapt this template for my website, however I cannot for the life of me figure out how the gallery filters works. There is no page reloading/php on clicking the filters, and none of the pictures have special tags. If I rename the picture filename it no longer works, so it must use that somehow however I can't find the filenames listed in another file (JS, CSS).
Anyone have any insight on this?

This is possible with a bit of jQuery.
$(function() {
var selectedClass = "";
$(".fil-cat").click(function(){
selectedClass = $(this).attr("data-rel");
$("#portfolio").fadeTo(100, 0.1);
$("#portfolio div").not("."+selectedClass).fadeOut().removeClass('scale-anm');
setTimeout(function() {
$("."+selectedClass).fadeIn().addClass('scale-anm');
$("#portfolio").fadeTo(300, 1);
}, 300);
});
});
body{
max-width: 900px;
float: none;
margin: auto;
}
#portfolio {
margin: 1rem 0;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1rem;
-moz-column-gap: 1rem;
column-gap: 1rem;
-webkit-column-width: 33.33333333333333%;
-moz-column-width: 33.33333333333333%;
column-width: 33.33333333333333%;
}
.tile {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
}
.tile:hover {
}
.scale-anm {
transform: scale(1);
}
p{
padding:10px;
border-bottom: 1px #ccc dotted;
text-decoration: none;
font-family: lato;
text-transform:uppercase;
font-size: 12px;
color: #333;
display:block;
float:left;
}
p:hover {
cursor:pointer;
background: #333;
color:#eee; }
.tile img {
max-width: 100%;
width: 100%;
height: auto;
margin-bottom: 1rem;
}
.btn {
font-family: Lato;
font-size: 1rem;
font-weight: normal;
text-decoration: none;
cursor: pointer;
display: inline-block;
line-height: normal;
padding: .5rem 1rem;
margin: 0;
height: auto;
border: 1px solid;
vertical-align: middle;
-webkit-appearance: none;
color: #555;
background-color: rgba(0, 0, 0, 0);
}
.btn:hover {
text-decoration: none;
}
.btn:focus {
outline: none;
border-color: var(--darken-2);
box-shadow: 0 0 0 3px var(--darken-3);
}
::-moz-focus-inner {
border: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toolbar mb2 mt2">
<button class="btn fil-cat" href="" data-rel="all">All</button>
<button class="btn fil-cat" data-rel="web">Websites</button>
<button class="btn fil-cat" data-rel="flyers">Flyers</button>
<button class="btn fil-cat" data-rel="bcards">Business Cards</button>
</div>
<div style="clear:both;"></div>
<div id="portfolio">
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/2-mon_1092-300x234.jpg" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/jti-icons_08-300x172.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/emi_haze-300x201.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/codystretch-300x270.jpg" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/jti-icons_08-300x172.jpg" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/transmission_01-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
<div class="tile scale-anm flyers all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/the-ninetys-brand_02-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/15-dia_1092-1-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/emi_haze-300x201.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/transmission_01-300x300.jpg" alt="" />
</div>
<div class="tile scale-anm web all">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" />
</div>
<div class="tile scale-anm bcards all">
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" />
</div>
</div>
<div style="clear:both;"></div>
Code Credits: creotip
Here are two codepens: Codepen 1 - Codepen 2

Netflix style image continuous carousels with mouse-over with Bootstrap support

Can someone suggest any Twitter Bootstrap supported jquery plugins that can provide Netflix style continuously scrolling image carousel with mouse-over?
I have already explored the carousel provided in Bootstrap JS library but it requires click of button and is not continuously scrolling, but instead just scrolls the full set of images under an item.
Any info of such cool plugins is greatly appreciated

Though not bootstrap/jquery based, but even better (pure css!), I came across one which is a decent place to start at and extend
HTML:
<div class="contain">
<h1>Pure CSS Netflix Video Carousel</h1>
<p>
Inspired by Eli White's article Performant CSS Animations: Netflix Case Study, his example pen, and Matt Taylor's CSS-only version.
</p>
<div class="row">
<div class="row__inner">
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-2.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-3.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-4.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-5.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-6.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-7.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-8.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-9.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-10.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-11.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-12.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-13.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-14.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-15.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-16.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-17.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-18.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-19.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
body,
html {
padding: 0 10px;
margin: 0;
background: #0e0f11;
color: #ecf0f1;
font-family: 'Open Sans', sans-serif;
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
h1,
p {
text-align: center;
}
p {
width: 100%;
max-width: 500px;
margin: auto;
}
a:link,
a:hover,
a:active,
a:visited {
-webkit-transition: color 150ms;
transition: color 150ms;
color: #95a5a6;
text-decoration: none;
}
a:hover {
color: #7f8c8d;
text-decoration: underline;
}
.contain {
width: 100%;
}
.row {
overflow: scroll;
width: 100%;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 70.3125px 0;
padding-bottom: 10px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 140.625px;
margin-right: 10px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 140.625px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0)));
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:after {
margin-top: -25px;
margin-left: -25px;
width: 50px;
height: 50px;
border: 3px solid #ecf0f1;
line-height: 50px;
text-align: center;
border-radius: 100%;
background: rgba(0,0,0,0.5);
z-index: 1;
}
.tile__details:before {
content: '▶';
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
-webkit-transform: translate3d(-62.5px, 0, 0);
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover ~ .tile {
-webkit-transform: translate3d(125px, 0, 0);
transform: translate3d(125px, 0, 0);
}

Develop Reference

JavaScript is the programming language of the Web.

Div that doesnt cover its content - javascript

The Problem is JQuery AJAX. After copy content into one file, and left code as is, the scripts start working :)

Related

Masonry images design issue with MaterializeCSS "materialboxed" class

Carousel transition end before displaying all content

Image positioning in image gallery

Gallery Filters, how to use in this example?

Netflix style image continuous carousels with mouse-over with Bootstrap support

Categories

Resources