I would like to know how to display a new progressbar which is displayed below the previous one but which must start where the previous one was finish
.meter {
height: 10px;
border-radius: 20px;
border-style: none;
margin-right: 40px;
background: red
}
.progress {
width: 40%;
border-radius: 15px;
border-style: none;
background: blue
}
<p> not this </p>
<div class="meter" style="width:100px">
<div class="progress">
<div>40%</div>
</div>
</div> <br>
<div class="meter" style="width:100px">
<div class="progress">
<div>40%</div>
</div>
</div>
<p> something like this </p>
<div class="meter" style="width:100px">
<div class="progress">
<div>40%</div>
</div>
</div>
<div class="meter" style="width:100px; margin-left: 100px">
<div class="progress">
<div>40%</div>
</div>
</div>
<div class="meter" style="width:100px; margin-left: 200px">
<div class="progress">
<div>40%</div>
</div>
</div>
i would like know in this exemple
how to make the second progress bar starts below the end of the first.
EDIT: i edited my code;
i use a loop ( .map in ReactJs ) to add new progress Bar
Here is an idea with some float hack
.meter {
border-radius: 20px;
margin-right: 40px;
background: red;
margin-bottom:10px;
}
/* Define the height of the meter since the progress is floating*/
.meter:before{
content:"";
display:inline-block;
vertical-align:top;
height:1.1em; /* the height of a text line */
width: 0px; /* to not affect the total width */
}
/**/
.progress {
border-radius: 15px;
background: blue;
color: #fff;
float:left;
margin-bottom:3em; /* Big enough to push the next float*/
}
<div class="meter" >
<div class="progress" style="width: 40%;">
40%
</div>
</div>
<div class="meter" >
<div class="progress" style="width: 20%;">
20%
</div>
</div>
<div class="meter" >
<div class="progress" style="width: 10%;">
10%
</div>
</div>
<div class="meter" >
<div class="progress" style="width: 20%;">
20%
</div>
</div>
<div class="meter" >
<div class="progress" style="width: 10%;">
10%
</div>
</div>
That you can simplify and use one element for each meter:
.meter {
border-radius: 20px;
background: red;
margin-bottom:10px;
}
/* Define the height of the meter since the progress is floating*/
.meter:before{
content:"";
display:inline-block;
vertical-align:top;
height:1.1em; /* the height of a text line */
width: 0px; /* to not affect the total width */
}
/**/
.meter:after {
content:attr(data-percentage);
width:var(--p,0);
border-radius: 15px;
background: blue;
color: #fff;
float:left;
margin-bottom:3em; /* Big enough to push the next float*/
}
<div class="meter" data-percentage="40%" style="--p:40%"></div>
<div class="meter" data-percentage="20%" style="--p:20%"></div>
<div class="meter" data-percentage="10%" style="--p:10%"></div>
<div class="meter" data-percentage="20%" style="--p:20%"></div>
<div class="meter" data-percentage="10%" style="--p:10%"></div>
UPDATE
Based on your last edit you can still consider the same trick
.meter {
border-radius: 20px;
border-style: none;
background: red;
margin-bottom:10px;
float:left;
}
.progress {
width: 40%;
border-radius: 15px;
border-style: none;
background: blue
}
.container:after {
content:"";
display:inline-block;
height:1.1em;
}
<p> something like this </p>
<div class="container">
<div class="meter" style="width:100px">
<div class="progress">
<div>40%</div>
</div>
</div>
</div>
<div class="container">
<div class="meter" style="width:100px;">
<div class="progress">
<div>40%</div>
</div>
</div>
</div>
<div class="container">
<div class="meter" style="width:100px;">
<div class="progress">
<div>40%</div>
</div>
</div>
</div>
Related
Current Behavior
I have the following basic structure:
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<!-- ... dozens of .boxes ... -->
</section>
#containers is .display: flex; flex-wrap: wrap, so the number of boxes on any one row is dynamic. This is an important feature that must be maintained.
Here's a minimal working example:
$(document).ready(function() {
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
});
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0.5em;
margin-left: 16px;
display: none; /* Initially collapsed */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content">Content</div>
</div>
</section>
</body>
I can easily use .slideToggle() to toggle visibility of a sibling (.content) underneath one of the clickable .collapsible divs:
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
Desired Behavior and Remarks
What I'd like is, on click of any .collapsible div in a row, the entire row will be toggled. That is, every .content div on the same horizontal row as displayed in the current viewport.
This must handle rows with dynamic number of columns, including viewport resizing. I'm flexible on the precise behavior, though.
Is this possible? And how much will it hurt?🙂 Changes to the document structure (such as adding some sort of row container) are OK, and I don't mind using some JS/jQuery code of course. The main thing I can't do is hard code the number of columns, as I need my site to remain responsive on vertical phones and fullscreen desktop browsers.
Maybe the jQuery slideToggle() function is not the best method.
Since a row will be the same height , you may look at a method to set size from 0 to another value. anybox resized will stretch other boxes on the same row.
here an example of the idea, setting a max-height from 0 to 200px and a transition.
it toggles a class.
$(document).ready(function() {
$(".collapsible").click(function() {
this.classList.toggle('slide');// plain javascript to toggle a class
});
});
*{box-sizing:border-box}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p{margin-top:0;}
.collapsible:hover {
background: #aaf;
}
.content {
margin:0 0.5em;
margin-left: 16px;
max-height:0; /* Initially collapsed */
transition:0.5s
}
.slide + .content{max-height:400px;/* which one got the class*/ color:darkred}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content"><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content"><p>Content</p><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content"><p>Content</p></div>
</div>
</section>
</body>
What you are missing here , is to set the height of the row to the height of the taller box, unless they will all be the same height.
For this, you can look for every box at the same top offset that the one clicked, and look for the tallest innercontent of the .contents and use this height .
Here comes the idea looking where each are standing and resets a max-height rule, you can inspire from too:
// defaut : supposed to be with no class 'slide' set on html elements
$(document).ready(function () {
let boxes = document.querySelectorAll(".collapsible");
let contents = document.querySelectorAll(".content");
$(".collapsible").click(function (event) {
let arrayContent = [];//reset
let hide=false;
for (i = 0; i < contents.length; i++) {
contents[i].style.maxHeight = "min-content";
let index = i;
let heightC = contents[i].offsetTop;
let boxOffset = contents[i].parentNode.offsetTop + 1;
// a few infos .add/remove what is needed
arrayContent.push({
index,
heightC,
boxOffset
});
contents[i].setAttribute("style", "");// resets inline style
}
let rowOffset = this.offsetTop;
if(this.classList.contains('slide')) {
hide=true;
}
let classState = this.classList;
arrayContent.forEach(function (obj) {
if (obj.boxOffset == rowOffset) {
if(hide == true) boxes[obj.index].classList.add('slide');/* reset needed if window resized => rows reorganized ? */
boxes[obj.index].classList.toggle("slide");
} else {
boxes[obj.index].classList.remove("slide");
}
});
});
});
* {
box-sizing: border-box
}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p {
margin-top: 0;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0 0.5em;
margin-left: 16px;
max-height: 0;
/* Initially collapsed */
transition: max-height 0.5s!important
}
.slide~.content {
max-height: 400px;
/* which one got the class*/
color: darkred;
}
.collapsible:before {
content: attr(class)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible">
<h2>Box 1</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box2">
<div class="collapsible">
<h2>Box 2</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box3">
<div class="collapsible">
<h2>Box 3</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box4">
<div class="collapsible">
<h2>Box 4</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box5">
<div class="collapsible">
<h2>Box 5</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
</section>
</body>
I have these progress bars which are suppose to work as ratings and they look good:
I have applied some CSS and I change their width with JavaScript by reading values from text files.
But are not responsive at all and whenever the window is resized:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="second-part">
<div class="row">
<div class="side">
<div>5 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar11" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p11">150</div>
</div>
<div class="side">
<div>4 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar12" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p12">63</div>
</div>
<div class="side">
<div>3 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar13" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p13">15</div>
</div>
<div class="side">
<div>2 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar14" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p14">6</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar15" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p15">20</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 90%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
#media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
JavaScript to change progress bar width:
var par1 = 4;
for(var i = 10; i < 16; i++) {
$('.p' + (i+1)).text(table[0][par1]);
$('.bar' + (i+1)).css("width", table[0][par1]);
par1++;
}
How could I make it more responsive? Thank you in advance!
I recommend using css flexbox, so the items wrap instead of overlap when the page is resized. You could use media queries with this to adjust the size of the items and container so they don't overlap/wrap. This site has a good explanation of flexbox: A Complete Guide to Flexbox.
I am creating my own full calendar and I have a problem with a border.
In places where divs touch, border lines are thicker because each element has own border and obviously in this places the border is rendered twice.
Depending on month, the calendar has different layout, so hardcoding isn't a good idea.
I prepared example here:
.block {
border: 1px solid black;
width: 80px;
height: 80px;
float: left;
}
<div class="block">1 </div>
<div class="block">2 </div>
<div class="block">3 </div>
<div class="block">4 </div>
<div class="block">5 </div>
<div class="block">6 </div>
<div class="block">7 </div>
View on JSFIddle
And my question is:
Is there a SMART or tricky way to solve this problem?
I may use plain JavaScript or CSS, but not jQuery.
Use this
.container{
display: inline-block;
border-top: 1px solid black;
border-left: 1px solid black;
}
.block {
border-right: 1px solid black;
border-bottom: 1px solid black;
width: 80px;
height: 80px;
float:left;
}
Wrap all your divs inside a container div and do the above mentioned styling. This way elements will not have overlapping borders.
.container {
display: inline-block;
border-top: 1px solid black;
border-left: 1px solid black;
}
.block {
border-right: 1px solid black;
border-bottom: 1px solid black;
width: 30px;
height: 30px;
float: left;
}
<div class="container">
<div class="block">1 </div>
<div class="block">2 </div>
<div class="block">3 </div>
<div class="block">4 </div>
<div class="block">5 </div>
<div class="block">6 </div>
<div class="block">7 </div>
<div style="clear: both"> </div>
<div class="block">8 </div>
<div class="block">9 </div>
<div class="block">10 </div>
<div class="block">11 </div>
<div class="block">12 </div>
<div class="block">13 </div>
<div class="block">14 </div>
<div style="clear: both"> </div>
<div class="block">15 </div>
<div class="block">16 </div>
<div class="block">17 </div>
<div class="block">18 </div>
<div class="block">19 </div>
<div class="block">20 </div>
<div class="block">21 </div>
<div style="clear: both"> </div>
<div class="block">22 </div>
<div class="block">23 </div>
<div class="block">24 </div>
<div class="block">25 </div>
<div class="block">26 </div>
<div class="block">27 </div>
<div class="block">28 </div>
<div style="clear: both"> </div>
<div class="block">29 </div>
<div class="block">30 </div>
<div class="block">31 </div>
</div>
Here I have reduced the height for better visibility.
A quick fix is just add
margin-right: -1px;
margin-bottom: -1px;
to the .block class.
https://jsfiddle.net/w76o9kL4/20/
Remove border right for every block except the last one.
<div class="block">1 </div>
<div class="block">2 </div>
<div class="block">3 </div>
<div class="block">4 </div>
<div class="block">5 </div>
<div class="block">6 </div>
<div class="block last">7 </div>
<style>
.block {
border: 1px solid black;
border-right: none;
width: 80px;
height: 80px;
float:left;
}
.last {
border-right : 1px solid black;
}
</style>
Simple css3 selector using + you can target sibling elements. Take a look
.block + .block {border-left:0px;}
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
.block {
border: 1px solid black;
width: 40px;
height: 40px;
float: left;
}
.block + .block {border-left:0px;}
<div class="block">1 </div>
<div class="block">2 </div>
<div class="block">3 </div>
<div class="block">4 </div>
<div class="block">5 </div>
<div class="block">6 </div>
<div class="block">7 </div>
Goodmorning developers,
I am new in frontend development. I'm stuck with the following problem:
I want to have a head div with 4 sub divs inside the head one. How can I do it with fitting the screen? (see sketch)
Kind regards
I think you need this please check:
See Fiddle Demo
.container {
border: 3px solid;
float: left;
width: 100%;
}
.custom_box {
float: left;
width: 100%;
}
.custom_box1 {
border: 3px solid;
float: left;
margin: 2%;
text-align: center;
width: 35%;
}
.custom_box2 {
border: 3px solid;
float: left;
margin: 2%;
text-align: center;
width: 55%;
}
<div class="container">
<div class="custom_box">
<div class="custom_box1">
<h1>1</h1>
</div>
<div class="custom_box2">
<h1>2</h1>
</div>
</div>
<div class="custom_box">
<div class="custom_box1">
<h1>1</h1>
</div>
<div class="custom_box2">
<h1>2</h1>
</div>
</div>
</div>
Here is the fiddle: https://jsfiddle.net/9Lum94me/
There are other ways as well with CSS floats, flexbox and table-cell which you can explore.
HTML:
<div class="container">
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
</div>
<div class="row">
<div class="column">Column 3</div>
<div class="column">Column 4</div>
</div>
</div>
CSS:
.container{
border: 1px solid gray;
}
.row{
padding: 10px;
}
.row .column{
display: inline-block;
min-width: 45%; min-height: 150px; border: 1px solid gray; margin: 0 4% 0 0;
}
EDIT:
You will have to manage the widths of the columns as per needs.
A bootstrap responsive example without any style...(Except bordering).
Fiddle example
.content{
border:2px solid green;
height:100px;
width:92%;
margin:20px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="border:1px solid blue;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="row no-gutter-2">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header1</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header2</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header3</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header4</div>
</div>
</div>
</div>
</div>
To test the responsiveness, plz re-size the browser window.
Above example is responsive on small, medium and large scale.
Please run the snippet on full page.
I want to create memory game. I want to place 6 cards in 4 rows. Problem is that DIV element that is "behind" card are visible and ruin whole design (z-index3 or .back class inside my code).It's working if i put display.none back .class but problem that blocks picture of card.
Here is code that I am using
HTML
<body>
<div id="picbox">
<span id="boxbuttons">
<span class="button" id="rezz">
Rezultat
<span id="counter">0</span>
</span>
<span class="button" id="ttime">00 : 22</span>
<span class="button">
<a onclick="ResetGame();">Reset</a>
</span>
<span class="button">
<a onclick="MutedSound();">Mute sound</a>
</span>
</span>
<div id="boxcard" align="center">
<div class="flipper" id="flipper10">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png"></div>
</div>
<div class="flipper" id="flipper11">
<div class="front"></div>
<div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png"></div>
</div>
<div class="flipper" id="flipper12">
<div class="front"></div>
<div class="back"><img src="http://icons.iconarchive.com/icons/martin-berube/sport/96/Volleyball-icon.png"></div>
</div>
<div class="flipper" id="flipper13">
<div class="front"></div>
<div class="back"><img src="http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png"></div>
</div>
<div class="flipper" id="flipper14">
<div class="front"></div>
<div class="back"><img src="http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png"></div>
</div>
<div class="flipper" id="flipper15">
<div class="front"></div>
<div class="back"><img src="http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png"></div>
</div>
<div class="flipper" id="flipper16">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992554c2ca340cc2ea8c0606ecd320824756e.png"></div>
</div>
<div class="flipper" id="flipper17">
<div class="front"></div>
<div class="back"><img src="http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png"></div>
</div>
<div class="flipper" id="flipper18">
<div class="front"></div>
<div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png"></div>
</div>
<div class="flipper" id="flipper19">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png"></div>
</div>
<div class="flipper" id="flipper110">
<div class="front"></div>
<div class="back"><img src="http://img3.uploadhouse.com/fileuploads/17699/17699259cb2d70c6882adc285ab8d519658b5dd7.png"></div>
</div>
<div class="flipper" id="flipper111">
<div class="front"></div>
<div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png"></div>
</div>
<div class="flipper" id="flipper20">
<div class="front"></div>
<div class="back"><img src="http://icons.iconarchive.com/icons/martin-berube/sport/96/Volleyball-icon.png"></div>
</div>
<div class="flipper" id="flipper21">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png"></div>
</div>
<div class="flipper" id="flipper22">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png"></div>
</div>
<div class="flipper" id="flipper23">
<div class="front"></div>
<div class="back"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png"></div>
</div>
<div class="flipper" id="flipper24">
<div class="front"></div>
<div class="back"><img src="http://img3.uploadhouse.com/fileuploads/17699/17699259cb2d70c6882adc285ab8d519658b5dd7.png"></div>
</div>
<div class="flipper" id="flipper25">
<div class="front"></div>
<div class="back"><img src="http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png"></div>
</div>
<div class="flipper" id="flipper26">
<div class="front"></div>
<div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png"></div>
</div>
<div class="flipper" id="flipper27">
<div class="front"></div>
<div class="back"><img src="http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png"></div>
</div>
<div class="flipper" id="flipper28">
<div class="front"></div>
<div class="back"><img src="http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png"></div>
</div>
<div class="flipper" id="flipper29">
<div class="front"></div>
<div class="back"><img src="http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png"></div>
</div>
<div class="flipper" id="flipper210">
<div class="front"></div>
<div class="back"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png"></div>
</div>
<div class="flipper" id="flipper211">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992554c2ca340cc2ea8c0606ecd320824756e.png"></div>
</div>
</div>
</div>
<div id="window-resizer-tooltip"><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth"></span> x <span class="tooltipHeight" id="winHeight"></span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth"></span> x <span class="tooltipHeight" id="vpHeight"></span></div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
font: 18px Verdana;
color: #FFF;
background: #CCC;
}
#picbox {
margin: 0px auto;
width: auto;
}
#boxcard {
/*perspective*/
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
-o-perspective:1000;
perspective:1000;
display: table;
margin: 0px auto;
width: auto;
z-index: 1;
display: table;
margin: 0px auto;
width: auto;
}
.flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotate(180deg);
}
.front, .back{
float: left;
width: 100px;
height: 120px;
margin: 5px;
padding: 5px;
border: 4px solid #EE872A;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
z-index:2;
background: #B1B1B1;
/* position:absolute;*/
/*backface-visibility*/
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* flip speed goes here */
.flipper {
/*transition*/
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
transition:0.6s;
/*transform-style*/
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
display: inline-block;
position:relative;
}
/* hide back of pane during swap */
/* front pane, placed above back */
/* back, initially hidden pane */
.back{
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotate(180deg);
z-index:3;
}
#boxbuttons {
text-align: center;
margin: 20px;
display: block;
}
#boxbuttons .button {
text-transform: uppercase;
background: #EE872A;
padding: 5px 10px;
margin: 5px;
border-radius: 10px;
cursor: pointer;
}
#boxbuttons .button:hover {
background: #999;
}
JS
function OpenCard(){
$(this).toggleClass('flipped');
}
$(".flipper").click(OpenCard);
JSFiddle Link
It's taking the whole background of image so you better keep each image in a specific div confined to that image only.