The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Flipping Images, Flipping more than one image on a page.
JamKota
post Mar 20 2023, 04:56 PM
Post #1


Newbie
*

Group: Members
Posts: 10
Joined: 20-March 23
Member No.: 28,865



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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 20 2023, 06:21 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JamKota
post Mar 20 2023, 07:02 PM
Post #3


Newbie
*

Group: Members
Posts: 10
Joined: 20-March 23
Member No.: 28,865





Hi Thx for replying, Where would I need more </div> going? Ive #image with its unique number on css, is that not right?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 20 2023, 08:56 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Mar 21 2023, 05:40 AM
Post #5


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



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>



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 21 2023, 08:27 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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 tongue.gif ).

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JamKota
post Mar 21 2023, 04:10 PM
Post #7


Newbie
*

Group: Members
Posts: 10
Joined: 20-March 23
Member No.: 28,865



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



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Mar 21 2023, 05:30 PM
Post #8


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



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.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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JamKota
post Mar 23 2023, 02:12 PM
Post #9


Newbie
*

Group: Members
Posts: 10
Joined: 20-March 23
Member No.: 28,865



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>
<!-- .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.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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JamKota
post Mar 23 2023, 02:13 PM
Post #10


Newbie
*

Group: Members
Posts: 10
Joined: 20-March 23
Member No.: 28,865



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>
<!-- .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.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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JamKota
post Mar 23 2023, 02:13 PM
Post #11


Newbie
*

Group: Members
Posts: 10
Joined: 20-March 23
Member No.: 28,865



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>
<!-- .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.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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Mar 23 2023, 03:15 PM
Post #12


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 23 2023, 03:26 PM
Post #13


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



See also Attaching files to your post, Instructions: https://forums.htmlhelp.com/index.php?showtopic=60737
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JamKota
post Mar 23 2023, 05:23 PM
Post #14


Newbie
*

Group: Members
Posts: 10
Joined: 20-March 23
Member No.: 28,865



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)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Mar 23 2023, 06:05 PM
Post #15


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



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

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 03:08 AM