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

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>

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

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.

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>

Categories