Adding a space between each bootstrap column - javascript

I would like to add an equal space between each bootstrap column. Each column is a div
$('.hover').hover(function() {
$(this).addClass('flip');
}, function() {
$(this).removeClass('flip');
});
$('.click').toggle(function() {
$(this).addClass('flipswing');
}, function() {
$(this).removeClass('flipswing');
});
.panel {
width: 100%;
position: relative;
height: 100%;
}
.panel .front {
width: 200px;
height: 200px;
position: relative;
top: 0px;
left: 0px;
border: 1px solid #ccc;
text-align: center;
-webkit-transform: rotateX(0) rotateY(0);
transform: rotateX(0) rotateY(0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
margin-left: 20px;
}
.panel .back {
width: 200px;
height: 200px;
position: relative;
top: 0px;
left: 0px;
border: 1px solid #ccc;
text-align: center;
-webkit-transform: rotateY(-179deg);
transform: rotateY(-179deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel.flip .front {
transform: rotateY(179deg)
}
.panel.flip .back {
-webkit-transform: rotateX(0) rotateY(0);
}
.panel {
-webkit-perspective: 800px;
perspective: 800px;
}
.swing .front,
.swing .back {
width: 140px;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transform-origin: 170px 0;
transform-origin: 170px 0;
}
.swing .front {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.swing .back {
-webkit-transform: rotateY(-180deg) translateX(198px) translateZ(2px);
transform: rotateY(-180deg) translateX(198px) translateZ(2px);
}
.swing.flipswing .front {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.swing.flipswing .back {
-webkit-transform: rotateY(0) translateX(198px) translateZ(2px);
transform: rotateY(0) translateX(198px) translateZ(2px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="main_title">
<p>Sample</p>
</div>
</div>
</div>
<div class="row" style="max-width:100%;left:0,top:0;margin:0;padding:0;">
<!-- single-instructor -->
<div class="col-lg-2">
<div class="hover panel">
<div class="front">
<div class="single_instructor">
<div class="author">
<img src="{% static 'second/images/people/person2.jpg' %}" style="max-width:100%;max-height:100%;" alt="">
</div>
<div class="author_decs">
<h4>Full Name</h4><br>
<p class="profession">Job Title</p>
<p>Country</p>
</div>
</div>
</div>
</div>
</div>
<!-- single-instructor -->
<div class="col-lg-2 col-lg-offset-6">
<div class="hover panel">
<div class="front">
<div class="single_instructor">
<div class="author">
<img src="{% static 'second/images/people/newperson.jpg' %}" style="max-width:100%;max-height:100%;" alt="">
</div>
<div class="author_decs">
<h4>FullName</h4><br>
<p class="profession">Job</p>
<p>Other Country</p>
<p>Random Date</p>
</div>
</div>
</div>
<div class="back">
<div class="single_instructor">
<div class="author_decs">
<p>More text goes here.</p>
<p> Country</p>
</div>
</div>
</div>
</div>
</div>
<!-- single-instructor -->
<div class="col-lg-2 col-lg-offset-6">
<div class="hover panel">
<div class="front">
<div class="single_instructor">
<div class="author">
<img src="{% static 'second/images/people/person1.jpg' %}" style="max-width:100%;max-height:100%;" alt="">
</div>
<div class="author_decs">
<h4>Fullname</h4><br>
<p>Some more text here</p>
</div>
</div>
</div>
<div class="back">
<div class="single_instructor">
<div class="author_decs">
<p>More...</p>
<p>Other person.</p>
<p> Country</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-lg-offset-6">
<div class="hover panel">
<div class="front">
<div class="single_instructor">
<div class="author">
<img src="{% static 'second/images/people/human.jpg' %}" style="max-width:100%;max-height:100%;" alt="">
</div>
<div class="author_decs">
<h4>Full Name</h4><br>
<p class="profession">Job Title</p>
<p>Country</p>
<p>More text</p>
</div>
</div>
</div>
<div class="back">
<div class="single_instructor">
<div class="author_decs">
<p>More Text.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-lg-offset-6">
<div class="hover panel">
<div class="front">
<div class="single_instructor">
<div class="author">
<img src="{% static 'second/images/people/person.jpg' %}" style="max-width:100%;max-height:100%;" alt="">
</div>
<div class="author_decs">
<h4>Name Surnam</h4><br>
<p class="profession">Job Title</p>
<p>Country</p>
<p>Test Text</p>
</div>
</div>
</div>
<div class="back">
<div class="single_instructor">
<div class="author_decs">
<p>Some Text</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I tried adding col-lg-offset-2 in each div after the first one but that didn't help

Related

Reveal text within transparent overlay

I've an image, and I'm making it transparent on click, so it reveals the background, Making the illusion of an overlay.
I'd like to also show some text in the center of the background, so it appears when the background reveals, how to do it?
Expected:
Codepen:
https://codepen.io/ogonzales/pen/yLJGzYr
Code:
$('.tricky').click(function(){
$('img').addClass("tricky_image");
});
UPDATE 1:
Codepen multiple images in grid
https://codepen.io/ogonzales/pen/qBNLLoW

This should work. If you have any questions, please let me know. You can also add a border if you want to match the reference image better.
$('.imageDiv').click(function(){
$('img').addClass("tricky_image");
$(".text").css("display", "inline");
});
.imageContainer {
position: relative;
text-align: center;
color: black;
max-width: 200px;
max-height: 200px;
}
.tricky_image {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 0.5;
filter: alpha(opacity=20);
}
.text {
display: none;
position: absolute;
top: 50%;
left: 50%;
opacity: 1;
transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="imageContainer">
<div class='imageDiv' id = 'test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/08_Dota_2_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
Updated answer:
The key thing here is remembering how the DOM works.
you had $('.imageDiv').click(function() {... which will only allow you to find the children of the image div, which the text class is not part of. I switched it to ('.imageContainer') which can traverse the DOM properly to find text as it is a child of imageContainer. Also $(this).find(".text").toggleClass("display-inline"); does not work because display-inline is not a class. I created a new class called addText which now hold the properties text had before where text now serves to hide the text until needed. Let me know in the comments if this works for you.
$('.imageContainer').click(function() {
$(this).find('img').toggleClass("tricky_image");
$(this).find('.text').toggleClass("addText");
});
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
align-items: center;
grid-gap: 15px;
}
.flip-card {
border-style: hidden;
background-color: transparent;
width: 120px;
height: 120px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #222e36ef;
color: white;
transform: rotateY(180deg);
}
/* background overlay - text */
.imageContainer {
position: relative;
text-align: center;
color: black;
max-width: 200px;
max-height: 200px;
}
.tricky_image {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 0.5;
filter: alpha(opacity=20);
}
.text {
display: none;
}
.addText{
display: inline;
position: absolute;
top: 50%;
left: 50%;
opacity: 1;
transform: translate(-50%, -50%);
}
#media(max-width: 768px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-8">
<section id="team">
<div class="container">
<div class="grid">
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
</div>
</div>
</section>
</div>

Positioning elements in a half-circle in correct way around Blue

I have this guy Blue (the blue character) and I want to add some elements in the half-circle around him.
each element is a container of an image and a span of text that should be positioned below the image.
I have tried this but as you see the elements rotate this way and each of spans not positioned correctly.
How can I do this?
.blueAnime {
width: 30vw;
height: auto;
}
.blueContainer{
display: flex;
justify-content: center;
width:100%;
padding-top:600px;
}
.coins {
width: 5vw;
height: auto;
}
.circle {
width: 300px;
height: 30px;
display: block;
position: absolute;
top: 110%;
left: 50%;
margin: -15px;
}
.one { transform: rotate(-0deg) translate(40vw); }
.two { transform: rotate(-20deg) translate(40vw); }
.three { transform: rotate(-40deg) translate(40vw); }
.four { transform: rotate(-60deg) translate(40vw); }
.five { transform: rotate(-80deg) translate(40vw); }
.six { transform: rotate(-100deg) translate(40vw); }
.seven { transform: rotate(-120deg) translate(40vw); }
.eight { transform: rotate(-140deg) translate(40vw); }
.nine { transform: rotate(-160deg) translate(40vw); }
.ten { transform: rotate(-180deg) translate(40vw); }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="blueContainer">
<img class="blueAnime" src="https://langfox.ir/pictures/blue.png">
<div class="circle one">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle two">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle three">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle four">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle five">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle six">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle seven">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle eight">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle nine">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle ten">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
</div>
</body>
</html>
Scroll down to see the Blue.

First of all, let's set up the img and span correctly. A single .circle element should look like this:
.circle {
display: inline-block;
text-align: center;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.circle > img {
display: block;
width: 30px; height: 30px;
margin: 0 auto;
}
<div class="circle four">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>text below</span>
</div>
Now that we have a single .circle element set up we can define many of them, and rotate them appropriately:
.blueAnime { width: 30vw; height: auto; }
.blueContainer{
display: flex;
justify-content: center;
width:100%;
padding-top:300px;
}
.circle {
display: inline-block;
position: absolute;
text-align: center;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.circle > img {
display: block;
width: 30px; height: 30px;
margin: 0 auto;
}
.one { transform: rotate(-0deg) translate(40vw); }
.two { transform: rotate(-20deg) translate(40vw); }
.three { transform: rotate(-40deg) translate(40vw); }
.four { transform: rotate(-60deg) translate(40vw); }
.five { transform: rotate(-80deg) translate(40vw); }
.six { transform: rotate(-100deg) translate(40vw); }
.seven { transform: rotate(-120deg) translate(40vw); }
.eight { transform: rotate(-140deg) translate(40vw); }
.nine { transform: rotate(-160deg) translate(40vw); }
.ten { transform: rotate(-180deg) translate(40vw); }
<div class="blueContainer">
<img class="blueAnime" src="https://langfox.ir/pictures/blue.png">
<div class="circle one"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle two"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle three"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle four"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle five"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle six"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle seven"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle eight"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle nine"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle ten"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
</div>
Note that the .circle elements still become rotated - we want them all exactly level, as a non-rotated element would be. We can achieve this by using rotate(n) before and after the translate property! Matrix operations produce different results depending on their order. Or goal here will be to "unrotate" the .circle element after translating and rotating it. Essentially the first rotation both visually rotates the .circle, and influences the direction of the upcoming transform. The second rotation, however, only visually "unrotates" the .circle, and since it is not followed by any transform operation, the center of the .circle will stay put.
.blueAnime { width: 30vw; height: auto; }
.blueContainer{
display: flex;
justify-content: center;
width: 100%;
padding-top: 300px;
}
.circle {
display: inline-block;
position: absolute;
text-align: center;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.circle > img {
display: block;
width: 30px; height: 30px;
margin: 0 auto;
}
.one { transform: rotate(-0deg) translate(40vw) rotate(0deg); }
.two { transform: rotate(-20deg) translate(40vw) rotate(20deg); }
.three { transform: rotate(-40deg) translate(40vw) rotate(40deg); }
.four { transform: rotate(-60deg) translate(40vw) rotate(60deg); }
.five { transform: rotate(-80deg) translate(40vw) rotate(80deg); }
.six { transform: rotate(-100deg) translate(40vw) rotate(100deg); }
.seven { transform: rotate(-120deg) translate(40vw) rotate(120deg); }
.eight { transform: rotate(-140deg) translate(40vw) rotate(140deg); }
.nine { transform: rotate(-160deg) translate(40vw) rotate(160deg); }
.ten { transform: rotate(-180deg) translate(40vw) rotate(180deg); }
<div class="blueContainer">
<img class="blueAnime" src="https://langfox.ir/pictures/blue.png">
<div class="circle one"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle two"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle three"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle four"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle five"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle six"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle seven"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle eight"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle nine"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
<div class="circle ten"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
</div>

.blueAnime {
width: 30vw;
height: auto;
}
.blueContainer{
display: flex;
justify-content: center;
width:100%;
padding-top:600px;
position:relative;
}
.coins {
width: 5vw;
height: auto;
}
.circle {
width: 300px;
height: 30px;
display: block;
position: absolute;
top: 80%;
left: 30%;
margin: -15px;
}
.one { transform: rotate(-0deg) translate(40vw); }
.two { transform: rotate(-20deg) translate(40vw); }
.three { transform: rotate(-40deg) translate(40vw); }
.four { transform: rotate(-60deg) translate(40vw); }
.five { transform: rotate(-80deg) translate(40vw); }
.six { transform: rotate(-100deg) translate(40vw); }
.seven { transform: rotate(-120deg) translate(40vw); }
.eight { transform: rotate(-140deg) translate(40vw); }
.nine { transform: rotate(-160deg) translate(40vw); }
.ten { transform: rotate(-180deg) translate(40vw); }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="blueContainer">
<img class="blueAnime" src="https://langfox.ir/pictures/blue.png">
<div class="circle one">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle two">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle three">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle four">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle five">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle six">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle seven">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle eight">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle nine">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
<div class="circle ten">
<img class="coins" src="https://langfox.ir/pictures/coins.png">
<span>This is going to be below each image</span>
</div>
</div>
</body>
</html>
Add position:relative; to blueContainer class
.circle {
top: 80%;
left: 30%;
}
please change top and left as you want

jquery to flip cards onClick rather than css hover rotate

I am newbie JS and jquery so take it easy on me! lol....I'm using Bootstrap to make a layout using cards. As of now I have the cards flipping on a hover which works good but I think I would rather the cards flip back and forth on clicks. I have tried giving the cards a class of flip and using toggleclass but am not having any luck. Any advice would be greatly appreciated! Thanks!
.book-card {
position: relative;
box-shadow: 5px 15px 50px #aaa;
max-width: 420px;
overflow: hidden;
transition: all .8s;
}
.rotate {
perspective: 100rem;
}
.back {
position: absolute;
top: -100%;
background: #fefefe;
height: 100%;
width: 100%;
opacity: 0;
user-select: none;
pointer-events: none;
transform: rotateY(180deg);
transition: top .8s, opacity .4s;
}
.back-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.back-content p {
color: #111517;
}
.back-content h1 {
font-size: 30px !important;
}
.back-content h3 {
font-size: 25px !important;
}
.back-content a {
font-size: 30px;
padding-left: 3px;
}
.rotate:hover .book-card {
transform: rotateY(180deg);
}
.rotate:hover .back {
opacity: 1;
top: 0;
user-select: auto;
pointer-events: auto;
}
<div class="col-xl-3 col-lg-4 col-sm-8 rotate">
<div class="card text-center mb-3 book-card mx-auto">
<div class="card-header">
<h4 class="font-weight-light">TBD - <em>HRG</em></h4>
</div>
<div class="card-body">
<img src="/images/girl-two.png" class="img-fluid rounded">
</div>
<div class="card-footer">
Portland, ME
</div>
<div class="back">
<div class="back-content">
<h1 class="text-uppercase font-weight-light font-italic">Portland, ME</h1>
<h3 class="mb-3">4:45pm</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos veniam</p>
<img src="images/linklong.png">
</div>
</div>
</div>
</div>
Should I remove the hover rotate css?

You can do somthing like this..
`.flip .card .back {
padding-top: 10%;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
position: absolute;
}`
$('.flip').click(function(){ //hover can be used
$(this).find('.card').toggleClass('flipped');
});
body{
padding-top:50px;
background: #555;
}
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
text-align: center;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card {
width: 270px;
height: 178px;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
background-color: #fff;
}
.flip .card .face {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front {
position: absolute;
width: 270px;
z-index: 1;
}
.flip .card .front img{
width: 270px;
height: 100%;
}
.flip .card .img {
position: relaitve;
width: 270px;
height: 178px;
z-index: 1;
border: 2px solid #000;
}
.flip .card .back {
padding-top: 10%;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
position: absolute;
}
.inner{
margin:0px !important;
width: 270px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="inner">
<img src="https://images.pexels.com/photos/1023756/pexels-photo-1023756.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
</div>
</div>
<div class="face back">
<div class="inner text-center">
<h3>Improved efficiency through automation</h3>
<button type="button" class="btn btn-default">Know More</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="inner">
<img src="https://images.pexels.com/photos/1023756/pexels-photo-1023756.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
</div>
</div>
<div class="face back">
<div class="inner text-center">
<h3>Improved efficiency through automation</h3>
<button type="button" class="btn btn-default">Know More</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="inner">
<img src="https://images.pexels.com/photos/1023756/pexels-photo-1023756.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
</div>
</div>
<div class="face back">
<div class="inner text-center">
<h3>Improved efficiency through automation</h3>
<button type="button" class="btn btn-default">Know More</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="inner">
<img src="https://images.pexels.com/photos/1023756/pexels-photo-1023756.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
</div>
</div>
<div class="face back">
<div class="inner text-center">
<h3>Improved efficiency through automation</h3>
<button type="button" class="btn btn-default">Know More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

On click x remove class on y

I need to close (remove class .active) when clicking on .btn.
There probably is a conflict because also clicking on .item.
It only works on clicking on an other .item.
$(".item").on("click", function() {
$(".item").removeClass("active");
$(this).addClass("active");
});
//$(".btn").on("click", function(){
// $(".item").removeClass("active");
//});
$(".btn").on("click", function() {
$(this).parent(".item").removeClass("active");
});
* {
box-sizing: border-box;
transition: 0.5s;
margin: 0;
padding: 0;
}
.clear {
clear: both;
height: 0;
}
.wrap {
padding: 20px;
background: #eee;
color: #fff;
}
.btn {
display: block;
line-height: 100px;
position: relative;
z-index: 100;
font-size: 14px;
text-align: center;
cursor: pointer;
}
.btn:hover {
background: #f00;
}
.item {
position: relative;
float: left;
margin: 2px;
width: 100px;
height: 100px;
text-align: center;
background: purple;
overflow: hidden;
}
.item.active {
overflow: visible;
width: 200px;
height: 200px;
}
.large {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.active .large {
width: 200px;
height: 200px;
background: red;
opacity: 1;
z-index: 10;
}
.close {
position: absolute;
opacity: 0;
right: 8px;
bottom: 8px;
width: 16px;
height: 16px;
text-align: center;
background: black;
cursor: pointer;
font-family: Arial;
font-size: 11px;
}
.active .close {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="item">
<h2 class="btn">item 1</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 2</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 3</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 4</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 5</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 6</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 7</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="clear"></div>
</div>

You need to prevent the default action in one of the buttons, otherwise both actions will be executed (the opener and the close action). Return false on any jQuery event will prevent default action and stop propagation of the event.
Check my example, i changed the close button action to the span.close elements:
$(".item").on("click", function(){
$(".item").not($(this)).removeClass("active");
$(this).addClass("active");
});
$(".close").on("click", function(){
$(this).closest(".item.active").removeClass("active");
return false;
});
*{box-sizing:border-box; transition:0.5s; margin:0; padding:0;}
.clear{clear:both; height:0;}
.wrap{padding:20px; background:#eee; color:#fff;}
.btn{display:block; line-height:100px; position:relative; z-index:100; font-size:14px; text-align:center; cursor:pointer;}
.btn:hover{background:#f00;}
.item{position:relative; float:left; margin:2px; width:100px; height:100px; text-align:center; background:purple; overflow:hidden;}
.item.active{overflow:visible; width:200px; height:200px;}
.large{width:100px; height:100px; position:absolute; left:0; top:0; opacity:0;}
.active .large{width:200px; height:200px; background:red; opacity:1; z-index:10;}
.close{position:absolute; opacity:0; right:8px; bottom:8px; width:16px; height:16px; text-align:center; background:black; cursor:pointer; font-family:Arial; font-size:11px;}
.active .close{opacity:1;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="item">
<h2 class="btn">item 1</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 2</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 3</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 4</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 5</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 6</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="item">
<h2 class="btn">item 7</h2>
<div class="large">
<span class="close">x</span>
</div>
</div>
<div class="clear"></div>
</div>

Prevent the bubbling of the event to the parent "item". Use event.stopPropagation:
$(".btn").on("click", function(e){
$(this).parent(".item").removeClass("active");
e.stopPropagation();
});
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
Of course the way you designed it, the parent will never receive the clicks..

What about a toggling approach?
$(".item").on("click", function(){
$(".item").removeClass("active");
$(this).toggleClass("active");
});
https://jsfiddle.net/hw15pq6c/1/

Expanding a div (that has a hover flipping effect) on click

I'm trying to add an action to a clicked div that only appears when hovered (it's the "back side" of a flipping div, which is orange in the example below).
The action I'm trying to trigger is expanding the orange div so it covers all the other divs.
This is the code I'm having an issue with: http://jsfiddle.net/y892fqq1/2/
table {
width: 200px;
height: 200px;
border-collapse: collapse;
}
.front,
.back,
.flip,
.flip-container {
height: 100%;
width: 100%;
}
.flip-container {
perspective: 1000;
}
.flip-container:hover .flip,
.flip-container.hover .flip {
transform: rotateY(180deg);
}
.flip {
transition: 1s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
top: 0;
left: 0;
backface-visibility: hidden;
position: absolute;
}
.front {
z-index: 2;
transform: rotateY(0deg);
background-color: purple;
}
.back {
transform: rotateY(180deg);
background-color: orange;
}
<div class="content">
<table>
<tr>
<td>
<div class="flip-container">
<div class="flip">
<div class="front"></div>
<div class="back" onclick="expand()"></div>
</div>
</div>
</td>
<td>
<div class="flip-container">
<div class="flip">
<div class="front"></div>
<div class="back" onclick="expand()"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="flip-container">
<div class="flip">
<div class="front"></div>
<div class="back" onclick="expand()"></div>
</div>
</div>
</td>
<td>
<div class="flip-container">
<div class="flip">
<div class="front"></div>
<div class="back" onclick="expand()"></div>
</div>
</div>
</td>
</tr>
</table>
</div>
(Sorry for the long lines of codes!)
Here's a post I found that fits the most to my issue : https://stackoverflow.com/a/15489601 (shortcut to code: http://jsfiddle.net/85mJN/4/), but when I try that, it doesn't seem to work ...
Does anyone have any idea how I could proceed?
Many thanks,
Adrian

how about adding a class on click, which will style the rotating thing accordingly?
$(function(){
$(".flip").click(function(){
$(this).toggleClass("expanded");
});
});
*{
margin:0;
}
.expanded{
transition: 0s !important;
width:200px !important;
height:200px !important;
z-index:10 !important;
position:absolute !important;
transform: rotateY(180deg);
}
table {
width: 200px;
height: 200px;
border-collapse: collapse;
}
.front, .back, .flip, .flip-container {
height:100%;
width:100%;
left:0;
top:0;
}
.flip-container {
perspective: 1000;
}
.flip-container:not(.expanded):hover .flip, .flip-container.hover .flip {
transform: rotateY(180deg);
}
.flip {
transition: 1s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
top: 0;
left: 0;
backface-visibility: hidden;
position: absolute;
}
.front {
z-index: 2;
transform: rotateY(0deg);
background-color:purple;
}
.back {
transform: rotateY(180deg);
background-color:orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<table>
<tr>
<td>
<div class="flip-container">
<div class="flip">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</td>
<td>
<div class="flip-container">
<div class="flip">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="flip-container">
<div class="flip">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</td>
<td>
<div class="flip-container">
<div class="flip">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</td>
</tr>
</table>
</div>

Categories