Develop Reference

adding a button to each card to flip

So my basic idea is to add a button to each card which then flips the card and resets the previously flipped card. Now how do I make a button specific to each card which can flip/unflip the card and unflip the previously flipped card (when needed to)
I have this JSFiddle which I found in this question. I looked around the internet but couldn't find any solutions to this specific problem. It might be similar to this. Hope this could help :)
something like this too maybe
$('.flip-container .flipper').click(function() {
// flip back previous hovered element
$('.flip-container.hover').toggleClass('hover');
// flip current element
$(this).closest('.flip-container').toggleClass('hover');
});
/* flip the pane when hovered */
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 250px;
height: 250px;
}
/* flip speed */
.flipper {
transition: 0.8s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background-color: #fff;
}
.artist-1 {
background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>

It seems you just need to add a button and add it to the selector
$('.flip-container .flipper button').click(function() {
// flip back previous hovered element
$('.flip-container.hover').toggleClass('hover');
// flip current element
$(this).closest('.flip-container').toggleClass('hover');
});
/* flip the pane when hovered */
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 250px;
height: 250px;
}
/* flip speed */
.flipper {
transition: 0.8s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background-color: #fff;
}
.artist-1 {
background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
<button>Flip</button>
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
<button>Flip</button>
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>

Blur Background When Popup Image

I'm trying to blur the background when I click on an image and it popup.
I already have it where it blurs a section of the page. However, you can see anything that is outside of that section not blur-out.
CSS
.content2#blur.active{
filter: blur(20px);
pointer-events: none;
user-select: none;}
#popup{ /*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
#popup.active{
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}
HTML
<section class="port" id="pLink">
<div class="heading" id="blur">
<h2>Title</h2>
<p>Description.</p>
</div>
<div class="content2" id="blur">
<div class="pBox">
<a href="#" class="anchor" onclick="toggle()" id="img-1">
<img src="../mywebsite/img/bp.jpg">
<div class="overlay">
<h5>Image Description</h5>
</div>
</a>
</div>
</div>
<div id="popup">
<a href="#" class="anchor" onclick="toggle()">
<img src="../mywebsite/img/bp.jpg" class="img-1">
</div>
</section>
<div class="footer">
<p>Copyright</p>
</div>
JavaScript
function toggle(){
var blur = document.getElementById('blur');
blur.classList.toggle('active');
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}
I tried adding the same id="blur" to the footer but the problem is that it only works for one <div>.
I also tried adding a separate css code for let say `class="footer" but it doesn't work.
.footer#blur.active{
filter: blur(20px);
pointer-events: none;
user-select: none;}
I also tried moving the id tag to the section, but that only blurs the heading not the rest.

All you have to do is to add a "blur" class to anyone element you want to get the effect when the image is clicked.
The changes I made:
Change in CSS #blur to .blur
JS - The function takes all elements with class .blur and has add or remove class .active
HTML - added classes .blur to all elements that need to be blurred.
In one document you can have many classes with the same name, but you can have only one element with a unique ID! This is the reason I change the blur from ID to CLASS
function toggle() {
var blur = document.getElementsByClassName('blur');
for (var i = 0; i < blur.length; i++) {
blur[i].classList.toggle('active');
}
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}
.blur.active {
filter: blur(2px);
pointer-events: none;
user-select: none;
}
#popup {
/*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
#popup.active {
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}
<section class="port" id="pLink">
<div class="heading blur">
<h2>Title</h2>
<p>Description.</p>
</div>
<div class="content2 blur">
<div class="pBox">
<a href="#" class="anchor" onclick="toggle()" id="img-1">
<img src="https://blog.54ka.org/wp-content/uploads/2020/09/horse-galloping-close-up-action-photography_by_54ka-165x165.jpg">
<div class="overlay">
<h5>Image Description</h5>
</div>
</a>
</div>
</div>
<div id="popup">
<a href="#" class="anchor" onclick="toggle()">
<img src="https://blog.54ka.org/wp-content/uploads/2012/07/horses_XI_01_by_54ka.jpg" class="img-1">
</div>
</section>
<div class="footer blur">
<p>Copyright</p>
</div>

issues with injected content sizing

I am creating a "live search" feature, this works fine functionally, however, on responsive testing, it breaks almost as soon as you get to tablet/mobile size.
I am using bootstrap for layout and the injected content from the live search is basically just a template that is injected.
Here is my HTML, SCSS and JS as it stands:
$(function() {
$(".brand-page-search-box").on("input", function(e) {
e.preventDefault();
var containerTemplate,
itemTemplate,
root = 'http://jsonplaceholder.typicode.com';
containerTemplate = `<div class="row search-result-item-container"></div>`;
$.ajax({
url: root + '/posts/1',
method: 'GET'
}).then(function(data) {
$(".search-results").html(containerTemplate);
let returnedJSONToObj = JSON.parse(JSON.stringify(data)),
userID = returnedJSONToObj.userId,
id = returnedJSONToObj.id,
title = returnedJSONToObj.title,
body = returnedJSONToObj.body;
itemTemplate = `<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="flip-container">
<div class="card card-inverse">
<div class="front">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
<div class="back">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="flip-container">
<div class="card card-inverse">
<div class="front">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
<div class="back">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
</div>
</div>
</div>`;
$(".search-result-item-container").append(itemTemplate);
});
return false;
});
});
.flip-container {
-webkit-perspective: 1000;
perspective: 1000;
.card {
position: relative;
-webkit-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
&: hover {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.front,
.back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front {
z-index: 2;
.card-block {
background: url("http://lorempixel.com/1920/1080/");
}
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
.card-block {
background: url("http://lorempixel.com/900/500/");
}
}
}
}
<div class="container-fluid brand-search-bar">
<div class="row">
<div class="col-xs-12">
<nav class="navbar">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item">
<form action="#" id="form">
<div class="input-group">
<input type="text" class="form-control brand-page-search-box" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</span>
</div>
</form>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="container brand-img-container search-results"></div>
Now, the cards inject into the post fine, but look at the following screens to see how the sizing goes:
Desktop:
Laptop/Tablet:
Mobile:
As you can see, on mobile, it totally breaks for some reason and the cards "fold" into one another, but if bootstrap is meant to be handling the layout, why is this happening?
The inspector isnt being much help, nor are some of the articles I have been reading on here and elsewhere, unusually, anyone got any ideas on how to fix this?
I am using bootstrap 4 and jquery 2 if that helps.
If you have any questions, comments or requests, please do ask in the comments below.

You need to fix the flip effect css. Nothing to do with twitter bootstrap.
Your .flip-container is not getting height, so in xs when many containers stack you see the probleme.
You could set a fixed height for your .flip-container but since you want dynamic height here is a solution
Add .front{ position:relative} and .back{top: 0}
.flip-container {
-webkit-perspective: 1000;
perspective: 1000;
.card {
position: relative;
-webkit-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
&:hover {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.front,
.back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front {
z-index: 2;
position:relative; <---
.card-block {
background: url("http://lorempixel.com/1920/1080/");
}
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
top:0; <---
.card-block {
background: url("http://lorempixel.com/900/500/");
}
}
}
}

Overflowing images that don't conform to aspect ratio

I have a basic thumbnail list which can contain images of varying aspect ratios as illustrated in this fiddle:
Demo 1
The problem is - it looks a bit untidy due to the mishmash of aspect ratios.
Ideally I would like the images that don't conform to a specific aspect ratio to stay centered and overflow gracefully based on their shortest edge.
I've managed to get it to work for tall images but not wide ones as demonstrated in this fiddle:
Demo 2
Here is the markup and CSS:
CSS
.galleryArea {
background: rgba(0,0,0,0.7);
display:flex;
padding: 10px;
}
.galleryArea .imageWrapper {
position: relative;
width: calc(10% - 2px);
padding-top: 8%;
margin: 0 1px;
}
.galleryArea .imagePosition {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.galleryArea .imagePosition img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
width: 100%;
}
HTML
<div class="galleryArea">
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x100">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
</div>
Ideally this would be a pure CSS solution, but if it's impossible I don't mind using JS(jQuery) to achieve the result.
Many thanks
Chris
Edit
To better illustrate my intentions, here is an example showing it working using jQuery. Is this achievable using CSS only?
Demo 3

You can letterbox the images with just CSS using transform: translate(-50%, -50%); and width just an overflow:hidden on .imagePosition images will be center aligned vertically and horizontally.
.galleryArea .imagePosition img {
width: auto;
max-width: inherit;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: block;
}
Example fiddle - http://jsfiddle.net/v6q426bp/11/
You can also add either height:100% or width:100% to the image to restrict the layout even more.
With height:100% - Same as the link above or below with a 12 (unable to add more then 2 links)
Width width:100% - http://jsfiddle.net/v6q426bp/13/

3D transforms are not displaying in Chrome on Windows XP

I have a page with a series of cubes. These cubes are transformed in 3D using CSS.
They display fine in Chrome on Windows 7, but in Chrome on Windows XP all I see is a white background. Both are running the latest version of Chrome.
View the full page on jsfiddle
<div class="cube" style="-webkit-transform: translateZ(-32.5px);">
<div class="front" style="-webkit-transform: translateZ(32.5px);">
<img src="search.png" width="65" height="65">
</div>
<div class="back" style="-webkit-transform: rotateX(-180deg) translateZ(32.5px);">
<img src="search.png" width="65" height="65">
</div>
<div class="right" style="-webkit-transform: rotateY(90deg) translateZ(32.5px);">
<img src="/search.png" width="65" height="65">
</div>
<div class="left" style="-webkit-transform: rotateY(-90deg) translateZ(32.5px);">
<img src="search.png" width="65" height="65">
</div>
<div class="top" style="-webkit-transform: rotateX(90deg) translateZ(32.5px);">
<img src="search.png" width="65" height="65">
</div>
<div class="bottom" style="-webkit-transform: rotateX(-90deg) translateZ(32.5px);">
<img src="search.png" width="65" height="65">
</div>
</div>

Chrome will only properly render 3D css if GPU acceleration is enabled. If you test the same code on safari for windows it should work.
To see if your chrome has GPU acceleration enabled, type about:GPU into the address bar and see what it says.
http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

Hmm, perhaps you don't have a 3D Rendering enabled GPU, or maybe your graphics drivers don't support it?

Follwing will work on chrome and firefox
CSS code
.flip-container {
perspective: 1000;
-webkit-perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.flip-container, .front, .back {
float: left;
height: 179px;
margin-bottom: 49px;
margin-left: 31px;
width: 258px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden;
position: absolute;
top: 0;
left: -42px;
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
HTML code
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="product-box front">
#front content
</div>
<div class="product-box back">
#back content
</div>
</div>
</div>

Have you tried modernizr?
Go to this page
http://modernizr.com/download/#-flexboxlegacy-csstransforms3d-shiv-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load
Click on the download below.
Use the JavaScript on your page.
If it will work the way I think, on you Win7 machine in Chrome the html tag should have a class of csstransforms3d and on the WinXP machine in Chrome the html tag should have a class of no-csstransforms3d
I don't know if modernizr/chrome is that intelligent to see, if 3d acceleration is available and reflect it in the proper css class
edit
Here's a fiddle
http://jsfiddle.net/uSbYL/1/