Printable Version of Topic
HTMLHelp Forums _ Cascading Style Sheets _ Flipping Images
Posted by: JamKota Mar 20 2023, 04:56 PM
Hi all, I apologise in advance if this is a very simple question but I'm struggling to add more than 1 image on my Gallery page that flips. I can put 1 image in its position and flip that image just fine and I'm happy with how it looks and works. But I want multiple images on my Gallery and all of them to flip when you put the mouse over each one in turn. Every time I try to add code for the next image the 1st and now 2nd image merge into a mix of both images? Remove my 2nd image attempted code and the 1st one again works just fine. Below is my html and css...Please put me out my misery lol
HTML :-
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="Spitfire1.JPEG" alt="Spitfire" id="image2" style="width:300px;height:300px;">
<br />
</div>
<div class="flip-card-back">
<h1>Super Marine Spitfire</h1>
<p>Printed & painted by myself.</p>
</div>
External CSS is :-
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
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%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
#image1 {
position: absolute;
top: 30px;
right: 30px;
}
#image2 {
position: absolute;
top: 30px;
left: 30px;
}
#image3 {
position: absolute;
bottom: 30px;
right: 30px;
}
Posted by: Christian J Mar 20 2023, 06:21 PM
Hi!
QUOTE(JamKota @ Mar 20 2023, 10:56 PM)
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="Spitfire1.JPEG" alt="Spitfire" id="image2" style="width:300px;height:300px;">
<br />
</div>
<div class="flip-card-back">
<h1>Super Marine Spitfire</h1>
<p>Printed & painted by myself.</p>
</div>
A couple of </div> end tags seem to be missing.
Also I don't think the BR elements need to be there, and each ID value needs to be unique, of course.
Posted by: JamKota Mar 20 2023, 07:02 PM
Hi Thx for replying, Where would I need more </div> going? Ive #image with its unique number on css, is that not right?
Posted by: pandy Mar 20 2023, 08:56 PM
You have 4 start tags but only 2 closing tags. Exactly where the closing tags should be depends... I'm not sure about what you planned flip-card-inner to contain.
Posted by: coothead Mar 21 2023, 05:40 AM
Hi there JamKota,
try it like this...
HTML
CODE
<h1>Flip cards</h1>
<div id="card-holder">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/1018/300/300.jpg" alt="">
</div>
<div class="flip-card-back">
<h2>picture 1</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/1043/300/300.jpg" alt="">
</div>
<div class="flip-card-back">
<h2>picture 2</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/229/300/300.jpg" alt="">
</div>
<div class="flip-card-back">
<h2>picture 3</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/100/300/300.jpg" alt="">
</div>
<div class="flip-card-back">
<h2>picture 4</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<!-- #card-holder --></div>
CSSCODE
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em sans-serif;
}
h1 {
text-align: center;
}
h2{
font-size: 2em;
}
#card-holder {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
margin: 5px;
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,
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
.flip-card img {
display: block;
width: 100%;
height: auto;
border: 1px solid #000;
}
coothead
Posted by: Christian J Mar 21 2023, 08:27 AM
QUOTE(JamKota @ Mar 21 2023, 01:02 AM)
Hi Thx for replying, Where would I need more </div> going?
I put them at the end, which seemed to work in this case. It often helps code legibility to indent some of the nested elements, like this:
CODE
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="Spitfire1.JPEG" alt="Spitfire" id="image2" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Super Marine Spitfire</h1>
<p>Printed & painted by myself.</p>
</div>
</div>
</div>
...that way it becomes clearer how many end tags you need, and maybe also where they should be located (at least unless you use dozens of nested elements, in which case the indenting may continue all across the screen and beyond
).
QUOTE
Ive #image with its unique number on css, is that not right?
I just meant that each IMG element ID also needs a unique value in the HTML.
Posted by: JamKota Mar 21 2023, 04:10 PM
QUOTE(coothead @ Mar 21 2023, 10:40 AM)
Hi there JamKota,
try it like this...
HTMLCODE
<h1>Flip cards</h1>
<div id="card-holder">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/1018/300/300.jpg" alt="">
</div>
<div class="flip-card-back">
<h2>picture 1</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/1043/300/300.jpg" alt="">
</div>
<div class="flip-card-back">
<h2>picture 2</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/229/300/300.jpg" alt="">
</div>
<div class="flip-card-back">
<h2>picture 3</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/100/300/300.jpg" alt="">
</div>
<div class="flip-card-back">
<h2>picture 4</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<!-- #card-holder --></div>
CSSCODE
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em sans-serif;
}
h1 {
text-align: center;
}
h2{
font-size: 2em;
}
#card-holder {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
margin: 5px;
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,
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
.flip-card img {
display: block;
width: 100%;
height: auto;
border: 1px solid #000;
}
cootheadHi there mate.
Your code worked beautifully!! However im now struggling to align my flipping cards/images on my page. At present they are all lined up under each other going down the page, Id like them side by side and under each other say 3 images horizontal and 3 images vertical for example. Also i need to resize the cards/images as at present theyre too big, Ive scoured the .css files you provided but cannot see where id alter that? Sorry to be a pain lol
Ed.
Posted by: coothead Mar 21 2023, 05:30 PM
Hi there JamKota,
this is my test code
HTML
CODE
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Flip cards</title>
<link rel="stylesheet" href="screen.css" media="screen">
</head>
<body>
<h1>Gallery</h1>
<div id="card-holder">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/1018/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 1</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/1043/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 2</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/229/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 3</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/100/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 4</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/10/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 5</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/11/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 6</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/12/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 7</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/13/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 8</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/14/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 9</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<!-- #card-holder --></div>
</body>
</html>
screen.cssCODE
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em sans-serif;
}
h1 {
text-align: center;
}
h2{
font-size: 2em;
}
#card-holder {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.flip-card {
background-color: transparent;
width: 18.75em;
height: 18.75em;
margin: 1em;
perspective: 62.5em;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2.6s;
transform-style: preserve-3d;
box-shadow: 0 0 1em rgba( 0, 0, 0, 0.8 );
}
.flip-card:hover .flip-card-inner,
.flip-card:active .flip-card-inner {
transform: rotateY( 180deg );
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: #000;
}
.flip-card-back {
background-color: #2980b9;
color: #fff;
transform: rotateY( 180deg );
}
.flip-card img {
display: block;
width: 100%;
height: auto;
border: 1px solid #000;
}
You may see the example here...
Full Page Viewhttps://codepen.io/coothead/full/XWPxqWO
coothead
Posted by: JamKota Mar 23 2023, 02:12 PM
QUOTE(coothead @ Mar 21 2023, 10:30 PM)
Hi there JamKota,
this is my test code
HTMLCODE
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Flip cards</title>
<link rel="stylesheet" href="screen.css" media="screen">
</head>
<body>
<h1>Gallery</h1>
<div id="card-holder">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/1018/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 1</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/1043/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 2</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/229/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 3</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/100/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 4</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/10/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 5</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/11/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 6</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/12/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 7</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/13/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 8</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/14/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 9</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<!-- #card-holder --></div>
</body>
</html>
screen.cssCODE
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em sans-serif;
}
h1 {
text-align: center;
}
h2{
font-size: 2em;
}
#card-holder {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.flip-card {
background-color: transparent;
width: 18.75em;
height: 18.75em;
margin: 1em;
perspective: 62.5em;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2.6s;
transform-style: preserve-3d;
box-shadow: 0 0 1em rgba( 0, 0, 0, 0.8 );
}
.flip-card:hover .flip-card-inner,
.flip-card:active .flip-card-inner {
transform: rotateY( 180deg );
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: #000;
}
.flip-card-back {
background-color: #2980b9;
color: #fff;
transform: rotateY( 180deg );
}
.flip-card img {
display: block;
width: 100%;
height: auto;
border: 1px solid #000;
}
You may see the example here...
Full Page Viewhttps://codepen.io/coothead/full/XWPxqWO
cootheadHi again Mate, firstly u r a Genius!! Your new code does indeed align my images as id like, however I really need to sort out their sizes as they are all over the place lol. Apologies for keeping bothering you bud.
Ed
Posted by: JamKota Mar 23 2023, 02:13 PM
QUOTE(coothead @ Mar 21 2023, 10:30 PM)
Hi there JamKota,
this is my test code
HTMLCODE
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Flip cards</title>
<link rel="stylesheet" href="screen.css" media="screen">
</head>
<body>
<h1>Gallery</h1>
<div id="card-holder">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/1018/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 1</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/1043/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 2</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/229/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 3</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/100/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 4</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/10/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 5</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/11/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 6</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/12/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 7</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/13/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 8</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/14/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 9</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<!-- #card-holder --></div>
</body>
</html>
screen.cssCODE
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em sans-serif;
}
h1 {
text-align: center;
}
h2{
font-size: 2em;
}
#card-holder {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.flip-card {
background-color: transparent;
width: 18.75em;
height: 18.75em;
margin: 1em;
perspective: 62.5em;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2.6s;
transform-style: preserve-3d;
box-shadow: 0 0 1em rgba( 0, 0, 0, 0.8 );
}
.flip-card:hover .flip-card-inner,
.flip-card:active .flip-card-inner {
transform: rotateY( 180deg );
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: #000;
}
.flip-card-back {
background-color: #2980b9;
color: #fff;
transform: rotateY( 180deg );
}
.flip-card img {
display: block;
width: 100%;
height: auto;
border: 1px solid #000;
}
You may see the example here...
Full Page Viewhttps://codepen.io/coothead/full/XWPxqWO
cootheadHi again Mate, firstly u r a Genius!! Your new code does indeed align my images as id like, however I really need to sort out their sizes as they are all over the place lol. Apologies for keeping bothering you bud.
Ed
Posted by: JamKota Mar 23 2023, 02:13 PM
QUOTE(JamKota @ Mar 23 2023, 07:13 PM)
QUOTE(coothead @ Mar 21 2023, 10:30 PM)
Hi there JamKota,
this is my test code
HTMLCODE
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Flip cards</title>
<link rel="stylesheet" href="screen.css" media="screen">
</head>
<body>
<h1>Gallery</h1>
<div id="card-holder">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/1018/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 1</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/1043/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 2</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/229/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 3</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/100/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 4</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/10/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 5</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/11/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 6</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/12/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 7</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/13/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 8</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/14/300/300.jpg" alt="image detail">
</div>
<div class="flip-card-back">
<h2>picture 9</h2>
<p>Printed & painted by myself.</p>
</div>
</div>
<!-- .flip-card --></div>
<!-- #card-holder --></div>
</body>
</html>
screen.cssCODE
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em sans-serif;
}
h1 {
text-align: center;
}
h2{
font-size: 2em;
}
#card-holder {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.flip-card {
background-color: transparent;
width: 18.75em;
height: 18.75em;
margin: 1em;
perspective: 62.5em;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2.6s;
transform-style: preserve-3d;
box-shadow: 0 0 1em rgba( 0, 0, 0, 0.8 );
}
.flip-card:hover .flip-card-inner,
.flip-card:active .flip-card-inner {
transform: rotateY( 180deg );
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: #000;
}
.flip-card-back {
background-color: #2980b9;
color: #fff;
transform: rotateY( 180deg );
}
.flip-card img {
display: block;
width: 100%;
height: auto;
border: 1px solid #000;
}
You may see the example here...
Full Page Viewhttps://codepen.io/coothead/full/XWPxqWO
cootheadHi again Mate, firstly u r a Genius!! Your new code does indeed align my images as id like, however I really need to sort out their sizes as they are all over the place lol. Apologies for keeping bothering you bud.
Ed
Hi again Mate, firstly u r a Genius!! Your new code does indeed align my images as id like, however I really need to sort out their sizes as they are all over the place lol. I've added a screenshot to show you. Apologies for keeping bothering you bud.
Ed
Posted by: coothead Mar 23 2023, 03:15 PM
Hi there JamKota,
when replying to posts, please try to only quote what is relevant.
Repeating the code from my post three times is rather silly.
QUOTE('JamKota')
. I've added a screenshot to show you
Sorry, but I am not seeing it, have you hidden the little bugger somewhere ?
coothead
Posted by: Christian J Mar 23 2023, 03:26 PM
See also Attaching files to your post, Instructions: https://forums.htmlhelp.com/index.php?showtopic=60737
Posted by: JamKota Mar 23 2023, 05:23 PM
QUOTE(coothead @ Mar 23 2023, 08:15 PM)
Hi there JamKota,
when replying to posts, please try to
only quote what is relevant.
Repeating the code from my post
three times is rather silly.
QUOTE('JamKota')
. I've added a screenshot to show you
Sorry, but I am not seeing it, have you hidden the little bugger somewhere ?
cootheadHi Mate...No idea why it posted 3 times? I didnt mean to...And yes the screenshot is also missing? Ill try again.
Ed.
Attached image(s)
Posted by: coothead Mar 23 2023, 06:05 PM
Hi there JamKota,
you don't appear to be having much luck with your image posting.
Perhaps you should consider posting you code on a site like...
https://codepen.io/features/
coothead
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)