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; } |
coothead |
Mar 23 2023, 06:05 PM
Post
#2
|
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 - 09:53 PM |