How to align image right in lightbox when clicked - javascript

I am trying to align the image to the right when clicked. I have a lightbox script but cannot figure out how to move the image from the center to the right.
Here is the script:
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
<style type="text/css">
a.fancybox img {
border: none;
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.fancybox:hover img {
position: relative;
z-index: 999; -o-transform:
scale(1.03,1.03);
-ms-transform: scale(1.03,1.03);
-moz-transform: scale(1.03,1.03);
-webkit-transform: scale(1.03,1.03);
transform: scale(1.03,1.03);
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = true;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
Any help would be greatly appreciated. Also, if there is a way to make the lightbox cover the whole page, that would be cool too.
Thanks in advance.


Try the below in css
#fancybox-wrap{
left:auto !important;
right:0 !important;
}
$(function($) {
var addToAll = true;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function() {
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
a.fancybox img {
border: none;
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.fancybox:hover img {
position: relative;
z-index: 999;
-o-transform: scale(1.03, 1.03);
-ms-transform: scale(1.03, 1.03);
-moz-transform: scale(1.03, 1.03);
-webkit-transform: scale(1.03, 1.03);
transform: scale(1.03, 1.03);
}
#fancybox-wrap {
left: auto !important;
right: 0 !important;
}
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
<section class="main clearfix">
<section class="top">
<div class="wrapper content_header clearfix">
<div class="work_nav">
<h1 class="title">Map Gallery</h1>
</div>
</section>
<!-- end top -->
<section class="wrapper">
<div class="content">
<p align="center">Click to enlarge any map.</p>
<ul id="movieposters">
<li>
<img class="fancybox" src="http://economictimes.indiatimes.com/thumb/msid-45891755,width-640,resizemode-4/nasas-images-of-most-remarkable-events-you-cant-miss.jpg" width=200px height=200px />
</li>
<li>
<img class="fancybox" src="https://risehighershinebrighter.files.wordpress.com/2014/11/magic-of-blue-universe-images.jpg" width=200px height=200px />
</li>
</ul>
</div>
<!-- end content -->
</section>
</section>
<!-- end main -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>

Related

JQuery Scroll Animation Causes Objects To Load Invisible Not Visible No Opacity

I've used the following code to make objects fade on scroll. It works well, except that when the page loads, the objects are not visible. You have to scroll a little bit to make them visible. Then, the scrolling works to reduce opacity as intended. Any idea why? I've used bootstrap, jquery, and you can run the snippet below to test the issue.
Thanks,
Will
var target = $('.fade');
var targetHeight = 400;
$(document).scroll(function(e){
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if(scrollPercent >= 0){
target.css('opacity', scrollPercent);
}
});
/*!
Theme Name: Frozen Land
Author: Will Caulfield
Author URI: http://caulfield.co/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: frozenland.co
*/
body {
font-family: 'Lato', sans-serif;
}
h1 {
color: white;
text-transform: uppercase;
font-weight: 800;
font-size: calc(70px + 0.3vw);
margin: 10px 0px 25px 0px;
}
main {
background: -webkit-gradient(linear, left top, left bottom, from(#f9c4cc), to(#f27aaa));
background: linear-gradient(#f9c4cc, #f27aaa);
}
section {
height: 100vh;
}
#-webkit-keyframes floatIce {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(-15px);
transform: translatey(-15px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
#keyframes floatIce {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(-15px);
transform: translatey(-15px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
#-webkit-keyframes floatText {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(-10px);
transform: translatey(-10px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
#keyframes floatText {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(-10px);
transform: translatey(-10px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
#-webkit-keyframes floatLand {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(-5px);
transform: translatey(-5px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
#keyframes floatLand {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(-5px);
transform: translatey(-5px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
.hero {
position: relative;
top: -50px;
}
.hero-ice {
width: 200px;
-webkit-transform: translatey(0px);
transform: translatey(0px);
-webkit-animation: floatIce 6s ease-in-out infinite;
animation: floatIce 6s ease-in-out infinite;
}
.hero-text {
-webkit-transform: translatey(0px);
transform: translatey(0px);
-webkit-animation: floatText 6s ease-in-out infinite;
animation: floatText 6s ease-in-out infinite;
}
.hero-land {
width: 250px;
-webkit-transform: translatey(0px);
transform: translatey(0px);
-webkit-animation: floatText 6s ease-in-out infinite;
animation: floatText 6s ease-in-out infinite;
}
#-webkit-keyframes caret-float {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(7px);
transform: translatey(7px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
#keyframes caret-float {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(7px);
transform: translatey(7px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
.hero-scroll {
color: white;
font-size: 40px;
position: absolute;
bottom: 20px;
-webkit-transform: translatey(0px);
transform: translatey(0px);
-webkit-animation: caret-float 1.5s ease-in-out infinite;
animation: caret-float 1.5s ease-in-out infinite;
}
/*# sourceMappingURL=style.css.map */
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Googl Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,900&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">
<!-- Scripts -->
<title>Hello, world!</title>
</head>
<body>
<main>
<section class="d-flex flex-column justify-content-center align-items-center">
<div class="hero w-100 d-flex flex-column justify-content-center align-items-center fade">
<img class="hero-ice" src="img/ice-cream.png" />
<h1 class="hero-text">Frozen Land</h1>
<img class="hero-land" src="img/land.png" />
</div>
<i class="hero-scroll far fa-caret-square-down fade"></i>
</section>
<section>
<div>
z
</div>
</section>
<section>
<div>
z
</div>
</section>
</main>
<footer>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Custom Scripts -->
<script src="/js/custom.js"></script>
<script>
</script>
</body>
</html>

Class fade applies opacity: 0;, replace with other class name in HTML and in jQuery selector

rotate logo after entering a new section

I'm a newbie and I'm using fullpage.js for the first time. I hope you can help me.
So my goal is to rotate my logo by 60deg each time I enter a new section. I have 5 sections.
I've been trying some stuff but its not what i desired. Right now I use this.
But it only applies to the section0, section1 and resets at section3.
Why isnt it working?
$(document).ready(function(){
$('#fullpage').fullpage({
//options
sectionsColor: ['#2f323a', '#2b32fa', '#2ff23a', '#2f003a', '#2f322b'],
easingcss: 'cubic-bezier(.31,.87,.89,.48)',
loopTop: true,
loopBottom: true,
navigation: true,
navigationPosition: 'right',
afterLoad: function(anchor, index) {
$('#logo').toggleClass('rotate1');
},
onLeave: function(index, nextIndex, direction) {
$('#logo').toggleClass('rotate2');
}
});
});
#logo {
position: fixed;
width:80px;
height:80px;
top: 20px;
left: 20px;
z-index: 100;
}
#logo.rotate1 {
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#logo.rotate2 {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Website</title>
<link rel="stylesheet" href="assets/css/fullpage.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/main.css" type="text/css">
<script type="text/javascript">
</script>
</head>
<body>
<img id="logo" src="assets/img/logo.svg">
<div id="fullpage">
<div class="section"><h3>Section</h3>1</div>
<div class="section"><h3>Section</h3>2</div>
<div class="section"><h3>Section</h3>3</div>
<div class="section"><h3>Section</h3>4</div>
<div class="section"><h3>Section</h3>5</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/fullpage.min.js" type="text/javascript"></script>
<script src="assets/js/function.js" type="text/javascript"></script>
</body>
</html>

Using jquery data() and css() method
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#2f323a', '#2b32fa', '#2ff23a', '#2f003a', '#2f322b'],
easingcss: 'cubic-bezier(.31,.87,.89,.48)',
loopTop: true,
loopBottom: true,
navigation: true,
navigationPosition: 'right',
afterLoad: function(anchor, index) {
let angle = +$('#logo').data('angle') + 60;
$('#logo')
.css({'transform': `rotate(${angle}deg)`})
.data('angle', angle);
}
});
});
#logo {
position: fixed;
width: 80px;
height: 80px;
top: 20px;
left: 20px;
z-index: 100;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.as-console {
display: none!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.min.css" />
<img id="logo" src="https://via.placeholder.com/80" data-angle="-60">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.min.js"></script>
<div id="fullpage">
<div class="section">
<h3>Section</h3>1</div>
<div class="section">
<h3>Section</h3>2</div>
<div class="section">
<h3>Section</h3>3</div>
<div class="section">
<h3>Section</h3>4</div>
<div class="section">
<h3>Section</h3>5</div>
</div>

codepen multiple product cards

I am trying to make 8 product cards in the same container and i am following this example :
https://codepen.io/virgilpana/pen/RNYQwB
But when i try to add a 2nd,3d,etc card the animation works only for the 1st card and the others appear as photos.
Is it possible to have the example functionality in every product?
The html code of the example:
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<a id="view-code" href="https://codepen.io/virgilpana/pen/RNYQwB" target="_blank">VIEW CODE</a>
<div id="make-3D-space">
<div id="product-card">
<div id="product-front">
<div class="shadow"></div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
<div class="image_overlay"></div>
<div id="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">$39</span>
<span class="product_name">Adidas Originals</span>
<p>Men's running shirt</p>
<div class="product-options">
<strong>SIZES</strong>
<span>XS, S, M, L, XL, XXL</span>
<strong>COLORS</strong>
<div class="colors">
<div class="c-blue"><span></span></div>
<div class="c-red"><span></span></div>
<div class="c-white"><span></span></div>
<div class="c-green"><span></span></div>
</div>
</div>
</div>
</div>
</div>
<div id="product-back">
<div class="shadow"></div>
<div id="carousel">
<ul>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li>
</ul>
<div class="arrows-perspective">
<div class="carouselPrev">
<div class="y"></div>
<div class="x"></div>
</div>
<div class="carouselNext">
<div class="y"></div>
<div class="x"></div>
</div>
</div>
</div>
<div id="flip-back">
<div id="cy"></div>
<div id="cx"></div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

If you change all the id's to classes in the HTML CSS and JavaScript, and set (the now) .product_card to position: relative;, that should work!
Code Snippet:
$(document).ready(function(){
// Lift card and show stats on Mouseover
$('.product-card').hover(function(){
$(this).addClass('animate');
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, function(){
$(this).removeClass('animate');
$('div.carouselNext, div.carouselPrev').removeClass('visible');
});
// Flip card to the back side
$('.view_details').click(function(){
$('div.carouselNext, div.carouselPrev').removeClass('visible');
$('.product-card').addClass('flip-10');
setTimeout(function(){
$('.product-card').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo( 80 , 1, function(){
$('.product-front, .product-front div.shadow').hide();
});
}, 50);
setTimeout(function(){
$('.product-card').removeClass('flip90').addClass('flip190');
$('.product-back').show().find('div.shadow').show().fadeTo( 90 , 0);
setTimeout(function(){
$('.product-card').removeClass('flip190').addClass('flip180').find('div.shadow').hide();
setTimeout(function(){
$('.product-card').css('transition', '100ms ease-out');
$('.cx, .cy').addClass('s1');
setTimeout(function(){$('.cx, .cy').addClass('s2');}, 100);
setTimeout(function(){$('.cx, .cy').addClass('s3');}, 200);
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, 100);
}, 100);
}, 150);
});
// Flip card back to the front side
$('.flip-back').click(function(){
$('.product-card').removeClass('flip180').addClass('flip190');
setTimeout(function(){
$('.product-card').removeClass('flip190').addClass('flip90');
$('.product-back div.shadow').css('opacity', 0).fadeTo( 100 , 1, function(){
$('.product-back, .product-back div.shadow').hide();
$('.product-front, .product-front div.shadow').show();
});
}, 50);
setTimeout(function(){
$('.product-card').removeClass('flip90').addClass('flip-10');
$('.product-front div.shadow').show().fadeTo( 100 , 0);
setTimeout(function(){
$('.product-front div.shadow').hide();
$('.product-card').removeClass('flip-10').css('transition', '100ms ease-out');
$('.cx, .cy').removeClass('s1 s2 s3');
}, 100);
}, 150);
});
/* ---- Image Gallery Carousel ---- */
var carousel = $('#carousel ul');
var carouselSlideWidth = 335;
var carouselWidth = 0;
var isAnimating = false;
// building the width of the casousel
$('#carousel li').each(function(){
carouselWidth += carouselSlideWidth;
});
$(carousel).css('width', carouselWidth);
// Load Next Image
$('div.carouselNext').on('click', function(){
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft + carouselSlideWidth;
if(newLeft == carouselWidth || isAnimating === true){return;}
$('#carousel ul').css({'left': "-" + newLeft + "px",
"transition": "300ms ease-out"
});
isAnimating = true;
setTimeout(function(){isAnimating = false;}, 300);
});
// Load Previous Image
$('div.carouselPrev').on('click', function(){
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft - carouselSlideWidth;
if(newLeft < 0 || isAnimating === true){return;}
$('#carousel ul').css({'left': "-" + newLeft + "px",
"transition": "300ms ease-out"
});
isAnimating = true;
setTimeout(function(){isAnimating = false;}, 300);
});
});
/* Generals resets and unimportant stuff */
* { margin: 0px; padding: 0px; }
body {
background: #eaebec;
font-family: "Open Sans", sans-serif;
}
.view-code{
color:#48cfad;
font-size:14px;
text-transform:uppercase;
font-weight:700;
text-decoration:none;
position:absolute;
top:640px;
left:50%;
margin-left:-35px;
}
.view-code:hover{color:#34c29e;}
/* --- Product Card ---- */
.make-3D-space{
position: relative;
perspective: 800px;
width:340px;
height:500px;
transform-style: preserve-3d;
transition: transform 5s;
position:absolute;
top:80px;
left:50%;
margin-left:-167px;
}
.product-front, .product-back{
width:335px;
height:500px;
background:#fff;
position:absolute;
left:-5px;
top:-5px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.product-back{
display:none;
transform: rotateY( 180deg );
}
.product-card.animate .product-back, .product-card.animate .product-front{
top:0px;
left:0px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.product-card{
width:325px;
height:490px;
position:relative;
top:10px;
left:10px;
overflow:hidden;
transform-style: preserve-3d;
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
-o-transition: 100ms ease-out;
transition: 100ms ease-out;
}
div.product-card.flip-10{
-webkit-transform: rotateY( -10deg );
-moz-transform: rotateY( -10deg );
-o-transform: rotateY( -10deg );
transform: rotateY( -10deg );
transition: 50ms ease-out;
}
div.product-card.flip90{
-webkit-transform: rotateY( 90deg );
-moz-transform: rotateY( 90deg );
-o-transform: rotateY( 90deg );
transform: rotateY( 90deg );
transition: 100ms ease-in;
}
div.product-card.flip190{
-webkit-transform: rotateY( 190deg );
-moz-transform: rotateY( 190deg );
-o-transform: rotateY( 190deg );
transform: rotateY( 190deg );
transition: 100ms ease-out;
}
div.product-card.flip180{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
transition: 150ms ease-out;
}
.product-card.animate{
top:5px;
left:5px;
width:335px;
height:500px;
box-shadow:0px 13px 21px -5px rgba(0, 0, 0, 0.3);
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
-o-transition: 100ms ease-out;
transition: 100ms ease-out;
}
.stats-container{
background:#fff;
position:absolute;
top:386px;
left:0;
width:265px;
height:300px;
padding:27px 35px 35px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.product-card.animate .stats-container{
top:272px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.stats-container .product_name{
font-size:22px;
color:#393c45;
}
.stats-container p{
font-size:16px;
color:#b1b1b3;
padding:2px 0 20px 0;
}
.stats-container .product_price{
float:right;
color:#48cfad;
font-size:22px;
font-weight:600;
}
.image_overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#48daa1;
opacity:0;
}
.product-card.animate .image_overlay{
opacity:0.7;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.product-options{
padding:2px 0 0;
}
.product-options strong{
font-weight:700;
color:#393c45;
font-size:14px;
}
.product-options span{
color:#969699;
font-size:14px;
display:block;
margin-bottom:8px;
}
.view_details{
position:absolute;
top:112px;
left:50%;
margin-left:-85px;
border:2px solid #fff;
color:#fff;
font-size:19px;
text-align:center;
text-transform:uppercase;
font-weight:700;
padding:10px 0;
width:172px;
opacity:0;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.view_details:hover{
background:#fff;
color:#48cfad;
cursor:pointer;
}
.product-card.animate #view_details{
opacity:1;
width:152px;
font-size:15px;
margin-left:-75px;
top:115px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
div.colors div{
margin-top:3px;
width:15px;
height:15px;
margin-right:5px;
float:left;
}
div.colors div span{
width:15px;
height:15px;
display:block;
border-radius:50%;
}
div.colors div span:hover{
width:17px;
height:17px;
margin:-1px 0 0 -1px;
}
div.c-blue span{background:#6e8cd5;}
div.c-red span{background:#f56060;}
div.c-green span{background:#44c28d;}
div.c-white span{
background:#fff;
width:14px;
height:14px;
border:1px solid #e8e9eb;
}
div.shadow{
width:335px;height:520px;
opacity:0;
position:absolute;
top:0;
left:0;
z-index:3;
display:none;
background: -webkit-linear-gradient(left,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
background: -o-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
background: -moz-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.2));
}
.product-back div.shadow{
z-index:10;
opacity:1;
background: -webkit-linear-gradient(left,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
background: -o-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
background: -moz-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
}
.flip-back{
position:absolute;
top:20px;
right:20px;
width:30px;
height:30px;
cursor:pointer;
}
.cx, .cy{
background:#d2d5dc;
position:absolute;
width:0px;
top:15px;
right:15px;
height:3px;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.flip-back:hover .cx, .flip-back:hover .cy{
background:#979ca7;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.cx.s1, .cy.s1{
right:0;
width:30px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.cy.s2{
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.cy.s3{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.cx.s1{
right:0;
width:30px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.cx.s2{
-ms-transform: rotate(140deg);
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.cx.s3{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 100ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.carousel{
width:335px;
height:500px;
overflow:hidden;
position:relative;
}
.carousel ul{
position:absolute;
top:0;
left:0;
}
.carousel li{
width:335px;
height:500px;
float:left;
overflow:hidden;
}
.arrows-perspective{
width:335px;
height:55px;
position: absolute;
top: 218px;
transform-style: preserve-3d;
transition: transform 5s;
perspective: 335px;
}
.carouselPrev, .carouselNext{
width: 50px;
height: 55px;
background: #ccc;
position: absolute;
top:0;
transition: all 200ms ease-out;
opacity:0.9;
cursor:pointer;
}
.carouselNext{
top:0;
right: -26px;
-webkit-transform: rotateY( -117deg );
-moz-transform: rotateY( -117deg );
-o-transform: rotateY( -117deg );
transform: rotateY( -117deg );
transition: all 200ms ease-out;
}
.carouselNext.visible{
right:0;
opacity:0.8;
background: #efefef;
-webkit-transform: rotateY( 0deg );
-moz-transform: rotateY( 0deg );
-o-transform: rotateY( 0deg );
transform: rotateY( 0deg );
transition: all 200ms ease-out;
}
.carouselPrev{
left:-26px;
top:0;
-webkit-transform: rotateY( 117deg );
-moz-transform: rotateY( 117deg );
-o-transform: rotateY( 117deg );
transform: rotateY( 117deg );
transition: all 200ms ease-out;
}
.carouselPrev.visible{
left:0;
opacity:0.8;
background: #eee;
-webkit-transform: rotateY( 0deg );
-moz-transform: rotateY( 0deg );
-o-transform: rotateY( 0deg );
transform: rotateY( 0deg );
transition: all 200ms ease-out;
}
.carousel .x, .carousel .y{
height:2px;
width:15px;
background:#48cfad;
position:absolute;
top:31px;
left:17px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.carousel .x{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
top:21px;
}
.carousel .carouselNext .x{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.carousel .carouselNext .y{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<a class="view-code" href="https://codepen.io/virgilpana/pen/RNYQwB" target="_blank">VIEW CODE</a>
<div class="make-3D-space">
<div class="product-card">
<div class="product-front">
<div class="shadow"></div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
<div class="image_overlay"></div>
<div class="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">$39</span>
<span class="product_name">Adidas Originals</span>
<p>Men's running shirt</p>
<div class="product-options">
<strong>SIZES</strong>
<span>XS, S, M, L, XL, XXL</span>
<strong>COLORS</strong>
<div class="colors">
<div class="c-blue"><span></span></div>
<div class="c-red"><span></span></div>
<div class="c-white"><span></span></div>
<div class="c-green"><span></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="product-back">
<div class="shadow"></div>
<div class="carousel">
<ul>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li>
</ul>
<div class="arrows-perspective">
<div class="carouselPrev">
<div class="y"></div>
<div class="x"></div>
</div>
<div class="carouselNext">
<div class="y"></div>
<div class="x"></div>
</div>
</div>
</div>
<div class="flip-back">
<div class="cy"></div>
<div class="cx"></div>
</div>
</div>
</div>
<div class="product-card">
<div class="product-front">
<div class="shadow"></div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
<div class="image_overlay"></div>
<div class="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">$39</span>
<span class="product_name">Adidas Originals</span>
<p>Men's running shirt</p>
<div class="product-options">
<strong>SIZES</strong>
<span>XS, S, M, L, XL, XXL</span>
<strong>COLORS</strong>
<div class="colors">
<div class="c-blue"><span></span></div>
<div class="c-red"><span></span></div>
<div class="c-white"><span></span></div>
<div class="c-green"><span></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="product-back">
<div class="shadow"></div>
<div class="carousel">
<ul>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li>
</ul>
<div class="arrows-perspective">
<div class="carouselPrev">
<div class="y"></div>
<div class="x"></div>
</div>
<div class="carouselNext">
<div class="y"></div>
<div class="x"></div>
</div>
</div>
</div>
<div class="flip-back">
<div class="cy"></div>
<div class="cx"></div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
(You should also use the latest version of JQuery, which is 3.2.1 not 1.11.2)

I want that "mousewheel event delay"

I want that..
mousewheel event delay
example...I run wheeldown..so change "bg_02".
but change bg_05..
so i want delay
one wheeldown and change bg_01 -> bg_02
one wheeldown and change bg_02 -> bg_03
...
now wheeldown than change bg_01 -> bg_04 or wheeldown count ++
sorry my english is little
script
// Wheel
function wheel(){
if (event.wheelDelta >= 120){
wheelUp();
return;
}
else if (event.wheelDelta <= -120){
wheelDown();
}
}
var bgSpot = $('.bg_spot');
var bgSpot_Cnt = bgSpot.length;
bgSpot.eq(0).addClass('spot_on').css('top','0');
// Down
function wheelDown(i){
$('.spot_on').addClass('move_top');
$('.spot_on').next().css('top','0');
$('.spot_on').next().addClass('spot_on').prev().removeClass('spot_on');
}
CSS
.bg_spot{position:fixed;top:100%;right:0;bottom:0;left:0;z-index:10;width:100%;height:100%;
-webkit-transition: 0.6s ease;
-moz-transition: 0.6s ease;
-o-transition: 0.6s ease;
transition: 0.6s ease;}
.move_top{
-webkit-transform: translate3d(0,-100%,0);
-moz-transform: translate3d(0,-100%,0);
-o-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);}
.move_stage{
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);}
.top_0{top:0}
.bg_01{background:#ccc;}
.bg_02{background:#000;}
.bg_03{background:olive;}
.bg_04{background:green}
HTML
<body onmousewheel="wheel();">
<div class="bg_spot bg_01"> </div>
<div class="bg_spot bg_02"> </div>
<div class="bg_spot bg_03"> </div>
<div class="bg_spot bg_04"> </div>
</body>

changed your css and javascript. check the snippet
function wheel() {
if (event.wheelDelta >= 120) {
// wheelUp();
return;
} else if (event.wheelDelta <= -120) {
wheelDown();
}
}
// var bgSpot = $('.bg_spot');
// var bgSpot_Cnt = bgSpot.length;
// bgSpot.eq(0).addClass('spot_on').css('top', '0');
// Down
var i = 1,
j = 0;
function wheelDown() {
$('.bg_spot').hide();
$('.bg_0' + i).show();
// $('.spot_on').addClass('move_top');
// $('.spot_on').next().css('top', '0');
// $('.spot_on').next().addClass('spot_on').prev().removeClass('spot_on');
i++;
if (i > 4)
i = 1;
}
.bg_spot {
overflow: hidden;
position: absolute;
right: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
-webkit-transition: 0.6s ease;
-moz-transition: 0.6s ease;
-o-transition: 0.6s ease;
transition: 0.6s ease;
display: none;
}
.move_top {
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
-o-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.move_stage {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.top_0 {
top: 0
}
.bg_01 {
background: #ccc;
}
.bg_02 {
background: #000;
}
.bg_03 {
background: olive;
}
.bg_04 {
background: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body onmousewheel="wheel();">
<div class="bg_spot bg_01" style="display:block;">
</div>
<div class="bg_spot bg_02">
</div>
<div class="bg_spot bg_03">
</div>
<div class="bg_spot bg_04">
</div>
</body>

Keep jquery .addClass active after click, my div just reverts if i dont hold down mouse

I have an animation that expands a tiled div tag when you click the div, however I can't seem to get the active class to hold after the click, I have to hold down the mouse button or it will revert to its previous size, im not sure why.
I didn't create a jfiddle because its to hard to get everything to work right with out my custom stuff
http://snomada.com/angular_test/
is a live example.
My friend helped me out with a jsfiddle and it works but when i replicated with my code it doesnt work
http://jsfiddle.net/inpursuit/g6pf2ye1/3/
solved
body{
background: url(../images/banner.jpg);
background-size: 2000px 2000px;
background-repeat: no-repeat;
}
#content{
top:55px;
position:absolute;
margin:0px;
left:7%;
}
.tile-container{
float:left;
margin:5px;
width:400px;
height:200px;
overflow:hidden;
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
}
/*.tile-container:active,
.tile-container .test {
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
width:450px;
height:350px;
}
/*.tile-container:active > .tile,
.tile-container .test > .tile {
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
background-size: 450px 350px;
}
*/
.tile-container{
float:left;
margin:5px;
width:400px;
height:200px;
background-color: #0000FF;
overflow:hidden;
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
background-size: 450px 350px;
}
.tile-container.beenclicked {
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
background-size: 450px 350px;
width:450px;
height:350px;
}
.tile-container.beenclicked > .tile{
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
background-size: 450px 350px;
}
.tile{
background:inherit;
width:inherit;
height:inherit;
float:left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
padding:10px;
color:#fff;
}
.circular {
width: 50px;
height: 50px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
.circular img {
opacity: 0;
filter: alpha(opacity=0);
border:10px;
border-color:#fff;
}
/*
.active-tile > .tile{
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
}
*/
<html>
<head>
<title>Relic</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/MetroJs.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/cover.css" rel="stylesheet">
<script src="js/MetroJs.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/social.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
$( document ).ready(function() {
$(".tile-container").click(function(){
$(this).toggleClass("beenclicked");
});
});
</script>
</head>
<body class="metro" ng-app="userProfile" ng-controller="ProfileController as post">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Relic</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="content">
<div class="tile-container" ng-repeat="userpost in post.userPost" >
<div class="tile" style="background-image: url('{{userpost.image}}');" >
<div class="circular" style="background: url(' {{post.user.profileimage}} ') no-repeat; background-size: 50px 50px; border:5px; border-color:#fff;"></div>
<div class="weather-text">
<span class="location">{{userpost.title}}</span>
</div>
</div>
<div class="tile" style="background-image: url('{{userpost.image}}');" >
<div class="circular" style="background: url(' {{post.user.profileimage}} ') no-repeat; background-size: 50px 50px; border:5px; border-color:#fff;"></div>
<div class="weather-text">
<span class="temperature">{{userpost.message}}</span>
</div>
</div>
</div>
</div>
</body>
</html>

You need to stop using the "active" pseudo class similar to what #AmuletxHeart is saying. Remove the .tile-container:active selector from your CSS and change the classname that you're adding on click to something other than "active" to remove confusion. I've created a jsfiddle that shows what you want:
http://jsfiddle.net/inpursuit/g6pf2ye1/3/
$('.tile-container').on('click', function() {
$(this).toggleClass('beenclicked');
});
.tile-container.beenclicked {
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
width:450px;
height:350px;
}

Almost there.
In your css, you are only defining the :active pseudo-class.
Try out:
.tile-container:active,
.tile-container.active {}
.tile-container:active > .tile,
.tile-container.active > .tile {}
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes for more info on pseudo-classes.

I think I see the problem. Use Google Chrome, inspect element to debug your website. Press F12, click on the magnifying glass icon, then select the element you want to debug.
Basics of jQuery, check if DOM is fully loaded before running any scripts.
$( document ).ready(function() {
$(".tile").click(function(){
$(this).addClass("active");
});
});
The "active" css state is triggered when your mouse is held down. Depressing the button removes the "active" state from an element.
What you want to do is use the ".active" class instead:
Original
.tile-container :active {...}
Corrected
.tile-container .active {...}
When clicking on the square tiles, you are actually click the element with class "tile". I found that out by using the magnifying glass thing.
Also, I think you are confused between "tile-container" and "title-container". Notice the additional "t".
You need to change the jQuery to add the active class to the element with class "tile"
Original
$(".title-container").click(function(){
$(this).addClass("active");
});
Corrected
$(".tile").click(function(){
$(this).addClass("active");
});

Categories