HTMLHelp Forums [Powered by Invision Power Board]

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>
</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>
</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>
</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>
</div>

</div>

CSS

CODE

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...

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>
</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>
</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>
</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>
</div>

</div>

CSS

CODE

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

Hi 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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</div>

</div>

</body>
</html>

screen.css

CODE

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 View
https://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

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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</div>

</div>

</body>
</html>

screen.css

CODE

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 View
https://codepen.io/coothead/full/XWPxqWO

coothead

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. 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

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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</div>

</div>

</body>
</html>

screen.css

CODE

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 View
https://codepen.io/coothead/full/XWPxqWO

coothead

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. 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

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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</div>

</div>

</body>
</html>

screen.css

CODE

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 View
https://codepen.io/coothead/full/XWPxqWO

coothead

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. 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. IPB Image

QUOTE('JamKota')

. I've added a screenshot to show you

Sorry, but I am not seeing it, have you hidden the little bugger somewhere ? IPB Image

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. IPB Image

QUOTE('JamKota')

. I've added a screenshot to show you

Sorry, but I am not seeing it, have you hidden the little bugger somewhere ? IPB Image

coothead

Hi 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. IPB Image

Perhaps you should consider posting you code on a site like...

https://codepen.io/features/

coothead

Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Flipping Images

Posted by: JamKota Mar 20 2023, 04:56 PM

Posted by: Christian J Mar 20 2023, 06:21 PM

Posted by: JamKota Mar 20 2023, 07:02 PM

Posted by: pandy Mar 20 2023, 08:56 PM

Posted by: coothead Mar 21 2023, 05:40 AM

Posted by: Christian J Mar 21 2023, 08:27 AM

Posted by: JamKota Mar 21 2023, 04:10 PM

Posted by: coothead Mar 21 2023, 05:30 PM

Posted by: JamKota Mar 23 2023, 02:12 PM

Posted by: JamKota Mar 23 2023, 02:13 PM

Posted by: JamKota Mar 23 2023, 02:13 PM

Posted by: coothead Mar 23 2023, 03:15 PM

Posted by: Christian J Mar 23 2023, 03:26 PM

Posted by: JamKota Mar 23 2023, 05:23 PM

Posted by: coothead Mar 23 2023, 06:05 PM