Image positioning in image gallery - javascript

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>

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;
}
}

I am trying to open a modal window with some effect

The openModal() function gets called on the click of a function.
I checked on Google that the transition property doesn't work with the display property in CSS. The other way round is to do it with opacity. But I am unable to call animation from JavaScript for CSS property.
var whm, whs, whd, whc;
function openModal(a) {
whm="myModal"+a;
whs="mySlides"+a;
whd="demo"+a;
whc="caption"+a;
document.getElementById(whm).style.display = "block";
document.getElementById(whm).style.opacity = "1";
// document.getElementById(whm).classList.add('didLoad');
//document.getElementById(whm).className += " didLoad";
document.getElementById(whm).style.webkitTransition = "background 2s";
}
.modal {
display: none;
opacity: 0;
-webkit-transition: opacity 2s;
transition: opacity 2s;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
Whole code
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
opacity: 0;
-webkit-transition: opacity 2s;
transition: opacity 2s;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
.didLoad
{
background-color: black;
transition: background-color 2s;
-webkit-transition: background-color 2s;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
<body>
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="http://placehold.it/1900x1400" style="width:100%" onclick="openModal(1);currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://placehold.it/1900x1400" style="width:100%" onclick="openModal(2);currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://placehold.it/1900x1400" style="width:100%" onclick="openModal(3);currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://placehold.it/1900x1400" style="width:100%" onclick="openModal(4);currentSlide(1)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides1">
<div class="numbertext">1 / 4</div>
<img src="http://placehold.it/720x301" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">2 / 4</div>
<img src="http://placehold.it/720x302" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">3 / 4</div>
<img src="http://placehold.it/720x303" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">4 / 4</div>
<img src="http://placehold.it/720x304" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption1"></p>
</div>
<div class="column">
<img class="demo1 cursor" src="http://placehold.it/1900x1401" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo1 cursor" src="http://placehold.it/1900x1402" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo1 cursor" src="http://placehold.it/1900x1403" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo1 cursor" src="http://placehold.it/1900x1404" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<div id="myModal2" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides2">
<div class="numbertext">1 / 4</div>
<img src="http://placehold.it/720x201" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">2 / 4</div>
<img src="http://placehold.it/720x202" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">3 / 4</div>
<img src="http://placehold.it/720x203" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">4 / 4</div>
<img src="http://placehold.it/720x204" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption2"></p>
</div>
<div class="column">
<img class="demo2 cursor" src="http://placehold.it/1900x1301" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="bhai">
</div>
<div class="column">
<img class="demo2 cursor" src="http://placehold.it/1900x1302" style="width:100%" onclick="currentSlide(2)" alt="bhai bhai">
</div>
<div class="column">
<img class="demo2 cursor" src="http://placehold.it/1900x1303" style="width:100%" onclick="currentSlide(3)" alt="bhai bhai bhai">
</div>
<div class="column">
<img class="demo2 cursor" src="http://placehold.it/1900x1304" style="width:100%" onclick="currentSlide(4)" alt="fuck off">
</div>
</div>
</div>
<div id="myModal3" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides3">
<div class="numbertext">1 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">2 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">3 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">4 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption3"></p>
</div>
<div class="column">
<img class="demo3 cursor" src="http://placehold.it/1900x1400" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo3 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo3 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo3 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<div id="myModal4" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides4">
<div class="numbertext">1 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides4">
<div class="numbertext">2 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides4">
<div class="numbertext">3 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides4">
<div class="numbertext">4 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption3"></p>
</div>
<div class="column">
<img class="demo4 cursor" src="http://placehold.it/1900x1400" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo4 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo4 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo4 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<script>
var whm, whs, whd, whc;
function openModal(a) {
whm="myModal"+a;
whs="mySlides"+a;
whd="demo"+a;
whc="caption"+a;
document.getElementById(whm).style.display = "block";
document.getElementById(whm).style.opacity = "1";
// document.getElementById(whm).classList.add('didLoad');
//document.getElementById(whm).className += " didLoad";
document.getElementById(whm).style.webkitTransition = "background 2s";
}
function closeModal() {
document.getElementById(whm).style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName(whs);
var dots = document.getElementsByClassName(whd);
var captionText = document.getElementById(whc);
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>

Transitions don't work with display but with a new class and CSS animations, you can do some nice things (I only animated the 'show') :
var show = document.getElementById('show');
var hide = document.getElementById('hide');
show.addEventListener("click", function() {
document.getElementById('hello').classList.add("active");
});
hide.addEventListener("click", function() {
document.getElementById('hello').classList.remove("active");
});
#content {
position: relative;
text-align: center;
}
#hello {
position: absolute;
padding: 10px;
background-color: yellow;
text-align: center;
left: 0;
right: 0;
display: none;
opacity: 0;
}
#hello.active {
display: block;
opacity: 1;
animation: fadeIn .4s;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
<div id="content">
<div id="hello">
<p>Hello world !</p>
<button id="hide">Hide</button>
</div>
<button id="show">Show</button>
</div>

Div that doesnt cover its content

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 :)

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);
}

Categories

Resources