jquery to flip cards onClick rather than css hover rotate - javascript

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>

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>

Adding a space between each bootstrap column

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

How Would I change the peeking effect from hover to scroll

I have implemented the peeking effect into my website.
Here it is http://jsfiddle.net/7yrWL/1/
Now this is working and peeks when ever I hover over the image, Now what I simply want is this effect work only if we scroll to this section. Means the container peeks out over scroll only but a click.
Any idea anyone?
Thank you
<div class="main square">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Test peek test peek<br/>Test peek</p>
<h3>MORE TESTING</h3>
</div>
</div>
</div>
</div>
<div class="main">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<h3>MORE<br/>Peek</h3>
</div>
</div>
</div>
</div>
<div class="main large">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
</div>
</div>
</div>
</div>
.main { padding: 10px; overflow: hidden; background-color: orange; color: white; height: 300px; width: 300px; display: inline-block; }
.main > div { position: relative; background-color: red; height: 100%; }
.main .content { position: absolute; bottom: 0; padding: 10px; right: 0; left: 0; }
.main .peek { max-height: 0; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; transition: max-height: 1s; background-color: green; overflow:hidden; }
.main:hover .peek { max-height: 300px; } /* any way to make this 100% so it can fit any size? */
.main.large { height: 600px; width: 600px; }
$(window).scroll(function() {
scrollEffect();
});
function scrollEffect() {
$('.main').each(function(i) {
if ($(this).position().top <= $(window).scrollTop()) {
$(this).addClass('effect');
}
});
}
.main { padding: 10px; overflow: hidden; background-color: orange; color: white; height: 300px; width: 300px; display: inline-block; }
.main > div { position: relative; background-color: red; height: 100%; }
.main .content { position: absolute; bottom: 0; padding: 10px; right: 0; left: 0; }
.main .peek { max-height: 0; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; transition: max-height: 1s; background-color: green; overflow:hidden; }
.main.effect .peek, .main:hover .peek { max-height: 300px; } /* any way to make this 100% so it can fit any size? */
.main.large { height: 600px; width: 600px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main square">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Test peek test peek<br/>Test peek</p>
<h3>MORE TESTING</h3>
</div>
</div>
</div>
</div>
<div class="main">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<h3>MORE<br/>Peek</h3>
</div>
</div>
</div>
</div>
<div class="main large">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
</div>
</div>
</div>
</div>
Add an .main.effect .peek class for main, which has the same effect as .main:hover .peek, and then add an effect class to each main div that enters the visible area in the scroll event.

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