Flipping Images, Flipping more than one image on a page. |
Flipping Images, Flipping more than one image on a page. |
JamKota |
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; } |
Christian J |
Mar 20 2023, 06:21 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
Hi!
<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. |
JamKota |
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? |
pandy |
Mar 20 2023, 08:56 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 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.
|
coothead |
Mar 21 2023, 05:40 AM
Post
#5
|
Advanced Member Group: Members Posts: 206 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 |
Christian J |
Mar 21 2023, 08:27 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
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. |
JamKota |
Mar 21 2023, 04:10 PM
Post
#7
|
Newbie Group: Members Posts: 10 Joined: 20-March 23 Member No.: 28,865 |
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. |
coothead |
Mar 21 2023, 05:30 PM
Post
#8
|
Advanced Member Group: Members Posts: 206 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 |
JamKota |
Mar 23 2023, 02:12 PM
Post
#9
|
Newbie Group: Members Posts: 10 Joined: 20-March 23 Member No.: 28,865 |
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 |
JamKota |
Mar 23 2023, 02:13 PM
Post
#10
|
Newbie Group: Members Posts: 10 Joined: 20-March 23 Member No.: 28,865 |
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 |
JamKota |
Mar 23 2023, 02:13 PM
Post
#11
|
Newbie Group: Members Posts: 10 Joined: 20-March 23 Member No.: 28,865 |
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 |
coothead |
Mar 23 2023, 03:15 PM
Post
#12
|
Advanced Member Group: Members Posts: 206 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. 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 |
Christian J |
Mar 23 2023, 03:26 PM
Post
#13
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
See also Attaching files to your post, Instructions: https://forums.htmlhelp.com/index.php?showtopic=60737
|
JamKota |
Mar 23 2023, 05:23 PM
Post
#14
|
Newbie Group: Members Posts: 10 Joined: 20-March 23 Member No.: 28,865 |
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 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) |
coothead |
Mar 23 2023, 06:05 PM
Post
#15
|
Advanced Member Group: Members Posts: 206 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. Perhaps you should consider posting you code on a site like... https://codepen.io/features/ coothead |
Lo-Fi Version | Time is now: 27th April 2024 - 10:07 PM |