Tiles

Developer
Kasper
Size
3,681 Kb
Views
6,072
  1. Tiles Previews
  2. Tiles HTML Codes
  3. Tiles CSS Codes
  4. Tiles JS Codes

How do I make an tiles?

What is a tiles? How do you make a tiles? This script and codes were developed by Kasper on 19 December 2022, Monday.

Tiles Previews
IQ Test

Tiles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tiles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <div class="row"> <div class="col-md-3 no-mar no-pad"> <div class="img-effect-container"> <img class="img-responsive img-fullwidth" src="https://cds.stubru.be/sites/default/files/styles/800x800/public/article/2017_07/2015-06-21_-_stubru_-_graspop_zondag_-_04_motorhead_-_003.jpg?itok=CE83RkdY"/> <div class="img-overlay"> <p class="overlay-text">Naam Kunstwerk</p> <p class="overlay-text-small">Naam Artiest</p> <a href="http://www.benl.ebay.be/itm/PAUL-KOSTABI-Panda-Candy-30-30-/322609348024?hash=item4b1d03fdb8:g:P38AAOSwggpZdLt6" class="overlay-link">Bekijk Werk</a> </div> </div> </div> <div class="col-md-3 no-mar no-pad"> <div class="img-effect-container"> <img class="img-responsive img-fullwidth" src="https://cds.stubru.be/sites/default/files/styles/800x800/public/article/2017_07/2015-06-21_-_stubru_-_graspop_zondag_-_04_motorhead_-_003.jpg?itok=CE83RkdY"/> <div class="img-overlay"> <p class="overlay-text">Naam Kunstwerk</p> <p class="overlay-text-small">Naam Artiest</p> <a href="http://www.benl.ebay.be/itm/PAUL-KOSTABI-Panda-Candy-30-30-/322609348024?hash=item4b1d03fdb8:g:P38AAOSwggpZdLt6" class="overlay-link">Bekijk Werk</a> </div> </div> </div> <div class="col-md-3 no-mar no-pad"> <div class="img-effect-container"> <img class="img-responsive img-fullwidth" src="https://cds.stubru.be/sites/default/files/styles/800x800/public/article/2017_07/2015-06-21_-_stubru_-_graspop_zondag_-_04_motorhead_-_003.jpg?itok=CE83RkdY"/> <div class="img-overlay"> <p class="overlay-text">Naam Kunstwerk</p> <p class="overlay-text-small">Naam Artiest</p> <a href="http://www.benl.ebay.be/itm/PAUL-KOSTABI-Panda-Candy-30-30-/322609348024?hash=item4b1d03fdb8:g:P38AAOSwggpZdLt6" class="overlay-link">Bekijk Werk</a> </div> </div> </div> <div class="col-md-3 no-mar no-pad"> <div class="img-effect-container"> <img class="img-responsive img-fullwidth" src="https://cds.stubru.be/sites/default/files/styles/800x800/public/article/2017_07/2015-06-21_-_stubru_-_graspop_zondag_-_04_motorhead_-_003.jpg?itok=CE83RkdY"/> <div class="img-overlay"> <p class="overlay-text">Naam Kunstwerk</p> <p class="overlay-text-small">Naam Artiest</p> <a href="http://www.benl.ebay.be/itm/PAUL-KOSTABI-Panda-Candy-30-30-/322609348024?hash=item4b1d03fdb8:g:P38AAOSwggpZdLt6" class="overlay-link">Bekijk Werk</a> </div> </div> </div> </div> <div class="row"> <div class="col-md-3 no-mar no-pad"> <div class="img-effect-container"> <img class="img-responsive img-fullwidth" src="https://cds.stubru.be/sites/default/files/styles/800x800/public/article/2017_07/2015-06-21_-_stubru_-_graspop_zondag_-_04_motorhead_-_003.jpg?itok=CE83RkdY"/> <div class="img-overlay"> <p class="overlay-text">Naam Kunstwerk</p> <p class="overlay-text-small">Naam Artiest</p> <a href="http://www.benl.ebay.be/itm/PAUL-KOSTABI-Panda-Candy-30-30-/322609348024?hash=item4b1d03fdb8:g:P38AAOSwggpZdLt6" class="overlay-link">Bekijk Werk</a> </div> </div> </div> <div class="col-md-3 no-mar no-pad"> <div class="frontDiv"> <div class="img-effect-container"> <img class="img-responsive img-fullwidth" src="https://cds.stubru.be/sites/default/files/styles/800x800/public/article/2017_07/2015-06-21_-_stubru_-_graspop_zondag_-_04_motorhead_-_003.jpg?itok=CE83RkdY"/> <div class="img-overlay"> <p class="overlay-text">Naam Kunstwerk</p> <p class="overlay-text-small">Naam Artiest</p> <a href="http://www.benl.ebay.be/itm/PAUL-KOSTABI-Panda-Candy-30-30-/322609348024?hash=item4b1d03fdb8:g:P38AAOSwggpZdLt6" class="overlay-link">Bekijk Werk</a> </div> </div> </div> <div class="backDiv"> <a href="" class="overlay-link-back">Bekijk alle Werken</a> </div> </div> <div class="col-md-3 no-mar no-pad"> <div class="img-effect-container"> <img class="img-responsive img-fullwidth" src="https://cds.stubru.be/sites/default/files/styles/800x800/public/article/2017_07/2015-06-21_-_stubru_-_graspop_zondag_-_04_motorhead_-_003.jpg?itok=CE83RkdY"/> <div class="img-overlay"> <p class="overlay-text">Naam Kunstwerk</p> <p class="overlay-text-small">Naam Artiest</p> <a href="http://www.benl.ebay.be/itm/PAUL-KOSTABI-Panda-Candy-30-30-/322609348024?hash=item4b1d03fdb8:g:P38AAOSwggpZdLt6" class="overlay-link">Bekijk Werk</a> </div> </div> </div> <div class="col-md-3 no-mar no-pad"> <div class="img-effect-container"> <img class="img-responsive img-fullwidth" src="https://cds.stubru.be/sites/default/files/styles/800x800/public/article/2017_07/2015-06-21_-_stubru_-_graspop_zondag_-_04_motorhead_-_003.jpg?itok=CE83RkdY"/> <div class="img-overlay"> <p class="overlay-text">Naam Kunstwerk</p> <p class="overlay-text-small">Naam Artiest</p> <a href="http://www.benl.ebay.be/itm/PAUL-KOSTABI-Panda-Candy-30-30-/322609348024?hash=item4b1d03fdb8:g:P38AAOSwggpZdLt6" class="overlay-link">Bekijk Werk</a> </div> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
<script src='https://fastcdn.org/ScrollMagic/2.0.5/uncompressed/ScrollMagic.js'></script>
<script src='https://fastcdn.org/ScrollMagic/2.0.5/uncompressed/plugins/animation.gsap.js'></script>
<script src='https://fastcdn.org/ScrollMagic/2.0.5/uncompressed/plugins/debug.addIndicators.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tiles - Script Codes CSS Codes

.container-fluid { margin:0; padding:0; overflow:hidden;
}
.no-mar { margin:0;
}
.no-pad { padding:0;
}
.background { background: url(https://cds.stubru.be/sites/default/files/styles/800x800/public/article/2017_07/2015-06-21_-_stubru_-_graspop_zondag_-_04_motorhead_-_003.jpg?itok=CE83RkdY) no-repeat; background-size:cover; height:100%; width:100%; position:absolute; left:0; top:0; bottom:0; overflow:hidden; background-position:center center; -webkit-transition:0.3s ease-in-out all; transition:0.3s ease-in-out all; margin-right:-1px;
}
.img-effect-container { overflow:hidden;
}
.img-overlay { position:absolute; overflow:hidden; bottom:0; left:0; right:0; background-color:rgba(0,0,0,0.4); width:100%; height:0; -webkit-transition:0.4s ease all; transition:0.4s ease all;
}
@media screen and (max-width:768px) { .img-overlay.down { bottom:100%; }
}
.overlay-text { white-space: nowrap; color:#FFF; position:absolute; overflow:hidden; top:40%; left:50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size:24px; -webkit-transition:0.3s ease all; transition:0.3s ease all; opacity:0; font-weight:700;
}
.overlay-link { position:absolute; top:55%; left:50%; -webkit-transform: translate(-50%); transform: translate(-50%); color:#FFF; background-color:transparent; border:2px solid #C9BC37; padding:10px 25px; -webkit-transition:0.3s ease all; transition:0.3s ease all; opacity:0;
}
.overlay-link:hover, .overlay-link-back:hover { background-color:#C9BC37; color:#FFF; text-decoration:none;
}
.overlay-link:focus, .overlay-link-back:hover { color: #FFF; text-decoration: none;
}
.img-effect-container:hover .img-overlay { bottom:0; height:100%;
}
.img-effect-container:hover .overlay-text{ opacity:1;
}
.img-effect-container:hover .overlay-link{ opacity:1;
}
.img-effect-container:hover .background { -webkit-transform:scale(1.2) translateZ(0); transform:scale(1.2) translateZ(0);
}
.frontDiv { opacity:1; background-color:#555557;
}
.backDiv { position:absolute; width:100%; height:100%; left:0; top:0; opacity:0; background-color:#555557; z-index:-1;
}
.overlay-link-back { position: absolute; top: 55%; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); color: #FFF; background-color: transparent; border: 2px solid #C9BC37; padding: 10px 25px; -webkit-transition:0.3s ease all; transition: 0.3s ease all; opacity: 1;
}

Tiles - Script Codes JS Codes

var front = document.querySelector(".frontDiv"), back = document.querySelector(".backDiv"), TL = new TimelineMax({ paused:false, // START TL DELAYED BY 2 SEC delay:2, repeat:-1, // REVERSE TIMELINE WHEN COMPLETE yoyo:true, // NEED DELAY BETWEEN REVERSE & REPEAT repeatDelay:5 });	TL	.to(front, 1, {opacity:0,ease:Power1.easeInOut})	.to(back, 1,{css:{'z-index' :'0','opacity':'1'},ease:Power1.easeInOut},0)
// STOP THE TIMELINE WHEN FRONTCARD IS BEING HOVERED
// REVERSE IT IF IT IS ALREADY IN PROGRESS ANN STOP THE TL
front.addEventListener('mouseenter', function() { console.log('entered front div!') TL.reverse(0) TL.stop()
});
//PLAY THE TIMELINE AFTER FROM THE START AFTER STOP/REVERSE ON HOVER
front.addEventListener('mouseleave', function() { console.log('left front div!') // PLAY THE TL FROM THE START TL.play(0);
});
// PAUSE THE TIMELINE WHEN BACKCARD IS BEING HOVERED
back.addEventListener('mouseenter', function() { if (TL.progress(1)) { TL.pause(); console.log('entered back div!') }
});
//RESUME THE TIMELINE AFTER PAUSING IT ON HOVER
back.addEventListener('mouseleave', function() { console.log('left back div!') TL.resume();
});
var progress = TL.progress();
console.log(progress)
var controller = new ScrollMagic.Controller();
var switchdivscene = new ScrollMagic.Scene({ triggerElement : ".backDiv", triggerHook : "onEnter"
}) .addIndicators({name: "Switch DivScene"}) .setTween(TL) .addTo(controller) switchdivscene.on("enter", function (event) { console.log("Scene entered.");
}); switchdivscene.on("leave", function (event) { console.log("Scene left.");
});
Tiles - Script Codes
Tiles - Script Codes
Home Page Home
Developer Kasper
Username kdbkapsere
Uploaded December 19, 2022
Rating 3
Size 3,681 Kb
Views 6,072
Do you need developer help for Tiles?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kasper (kdbkapsere) Script Codes
Name
Science Bubbles Animation
Love 2 rainbow
Growing Heart Animation
Social Icon Fun
Slack Loader Animation
Unknown Pleasures WIP
Slack Logo test
Login Form
Share Page Animation
Ryu Hadouken GSAP Animation
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!