I am trying to open a modal window with some effect - javascript

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>

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>

Image slider html css [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I need to create this image slider. Which language/template/js/code is the best to use? I was thinking about slick, but I think it can be easier?

Here is the code without using any library
Just change the image URL to your image
Doing something without any library is the best practise for performance
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("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
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;
}
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
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;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="https://helpx.adobe.com/in/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="https://helpx.adobe.com/in/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
<div class="column">
<img class="demo cursor" src="img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
</div>
</div>

var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
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";
setTimeout(showSlides, 10000); // Change image every 2 seconds
}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
<h2>Automatic Slideshow</h2>
<p>Change image every 10 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://picsum.photos/1000/640?image=990" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://picsum.photos/1000/640?image=991" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://picsum.photos/1000/640?image=992" style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>

image fade in then text not working

When I keep the mouse on image, it should display the text with title and some description. This context is working only for the first image and for the remaining images it's not working.
I used jquery plugin. It's not working. Code below.
What are the changes need to be done, let me know. Thanks in advance
(function($) {
$.fn.hoverGrid = function(options) {
var settings = $.extend({
'itemClass': '.item'
}, options);
return this.each(function() {
var hoverGrid = $(this);
hoverGrid.addClass('hover-grid');
hoverGrid.find(settings.itemClass).addClass('hover-grid-item');
$(hoverGrid).find(settings.itemClass).hover(function() {
$(this).find('div.caption').stop(false, true).fadeIn(200);
},
function() {
$(this).find('div.caption').stop(false, true).fadeOut(200);
});
});
};
})(jQuery);
$(document).ready(function() {
$('#whatever').hoverGrid();
});
/*!
* jQuery Cookiebar Plugin CSS
* https://github.com/carlwoodhouse/jquery.cookieBar
*
* Copyright 2012, Mark Searle, Carl Woodhouse.
*/
.hover-grid .hover-grid-item {
width: 181px;
height: 181px;
margin: 0 18px 18px 0;
float: left;
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
overflow: hidden;
position: relative;
cursor: default;
}
.hover-grid img {
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
border: 0;
position: absolute;
margin: 0;
padding: 0;
}
.hover-grid-item .caption {
background-color: #222;
width: 145px;
height: 145px;
padding: 18px;
position: absolute;
left: 0;
color: #fff;
display: none;
line-height: 1.1;
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
}
.hover-grid-item .caption p {
font-size: 15px;
font-weight: 400;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div id="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div id="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
</div>
</div>

IDs must be unique within an html page. You can change your id=whatever to class=whatever and then use $(".whatever") to apply to all.
Updated snippet:
(function($) {
$.fn.hoverGrid = function(options) {
var settings = $.extend({
'itemClass': '.item'
}, options);
return this.each(function() {
var hoverGrid = $(this);
hoverGrid.addClass('hover-grid');
hoverGrid.find(settings.itemClass).addClass('hover-grid-item');
$(hoverGrid).find(settings.itemClass).hover(function() {
$(this).find('div.caption').stop(false, true).fadeIn(200);
},
function() {
$(this).find('div.caption').stop(false, true).fadeOut(200);
});
});
};
})(jQuery);
$(document).ready(function() {
$('.whatever').hoverGrid();
});
/*!
* jQuery Cookiebar Plugin CSS
* https://github.com/carlwoodhouse/jquery.cookieBar
*
* Copyright 2012, Mark Searle, Carl Woodhouse.
*/
.hover-grid .hover-grid-item {
width: 181px;
height: 181px;
margin: 0 18px 18px 0;
float: left;
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
overflow: hidden;
position: relative;
cursor: default;
}
.hover-grid img {
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
border: 0;
position: absolute;
margin: 0;
padding: 0;
}
.hover-grid-item .caption {
background-color: #222;
width: 145px;
height: 145px;
padding: 18px;
position: absolute;
left: 0;
color: #fff;
display: none;
line-height: 1.1;
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
}
.hover-grid-item .caption p {
font-size: 15px;
font-weight: 400;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
</div>
</div>

Linking to specific slide

I've got this slideshow on one page and on my homepage I've got a list of images (the same ones as in the slide).
I want to be able to, by clicking on a specific picture on the homepage, come to the same picture of the slide on the slideshow-page.
I tried to ID everything, but the slide starts from the first picture however I do it.
Is there any way to make the slideIndex a specific number from the start by having something in the link?
<div class="nav" style="font-size: 15px; margin-top: 7px;">
<div class="">
<a class="" onclick="plusDivs(-1)"><div class="triangle-right"></div></a>
<div class="fyrkant"></div>
<a class="" onclick="plusDivs(1)"><div class="triangle-left"></div></a>
</div>
Slides
<div class="w3-display-container mySlides">
<img src="img/1.jpg" style="width:100%">
<div class="">
<h1>
1
</h1>
<p>
Description
</p>
</div>
<img src="img/1.1.jpg" style="width:100%">
</div>
<div class="w3-display-container mySlides">
<img src="img/2.jpg" style="width:100%; background-color: #fff;">
<div class="">
<h1>
2
</h1>
<p>
</p>
</div>
<img src="img/2.2.jpg" style="width:100%">
</div>
Script
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>

Is this what you're looking for maybe?
<script>
var slideIndex = 1;
var hash = window.location.hash;
if(hash){
hash = parseInt(hash.split('#')[1]);
slideIndex = hash;
}
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
In this way you can pull a number from the url when a user visits your site and uses a "#[number]" at the end of the url. example: http://google.com/#3 - would show slide 3

hope to help
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').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("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
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;
}
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;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* 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)
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="http://placekitten.com/420/600" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://placekitten.com/450/600" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://placekitten.com/460/700" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://placekitten.com/420/600" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="http://placekitten.com/420/600" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="http://placekitten.com/450/600" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="http://placekitten.com/460/700" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="http://placekitten.com/420/600" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="http://placekitten.com/420/600" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="http://placekitten.com/450/600" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="http://placekitten.com/460/700" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="http://placekitten.com/420/600" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
</body>
</html>

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