On game card hover = show secondary image or video #149

New Issue

freakoverse · 2024-11-17T22:13:55Z

freakoverse commented

2024-11-17 22:13:55 +00:00

When a user hovers over a game card, the first image disappears and shows the second image set in place (or video) if available.

We have this code:

<div class="cardGameMainWrapper"><img src="https://example.com/image2.jpg" class="cardGameMain"></img>
</div>

Which would then turn into this:

<div class="cardGameMainWrapper cardGameMainWrapper2"><img src="https://example.com/image2.jpg" class="cardGameMain">
<img src="https://example.com/image2.jpg" class="cardGameMain">
</div>

or

<div class="cardGameMainWrapper cardGameMainWrapper2"><img src="https://example.com/image2.jpg" class="cardGameMain">
<video src="https://example.com/video.webm" autoplay muted class="cardGameMain"></video>
</div>

Where if there is a an extra image link (a new fourth column/variable in the games DB files) or a video link (fifth column/variable), then it would give that extra <img> or <video> and the extra class 'cardGameMainWrapper2'.

However, if there isn't, then it would remain as it currently is:

<div class="cardGameMainWrapper"><img src="https://example.com/image2.jpg" class="cardGameMain"></img>
</div>

(I'll be adding the CSS for the effects)

Note: The csv files would need to be updated to add the two new variables ('secondary box art' and 'clip' let's say). I can handle that when it comes to it.
Note: Keep in mind that the csv file may not have extra commas after the initial 2 commas, so hopefully that can be worked out, but if it can't, I'll see if i can re export everything with those needed extra commas

When a user hovers over a game card, the first image disappears and shows the second image set in place (or video) if available. We have this code: ``` <div class="cardGameMainWrapper"><img src="https://example.com/image2.jpg" class="cardGameMain"></img> </div> ``` Which would then turn into this: ``` <div class="cardGameMainWrapper cardGameMainWrapper2"><img src="https://example.com/image2.jpg" class="cardGameMain"> <img src="https://example.com/image2.jpg" class="cardGameMain"> </div> ``` or ``` <div class="cardGameMainWrapper cardGameMainWrapper2"><img src="https://example.com/image2.jpg" class="cardGameMain"> <video src="https://example.com/video.webm" autoplay muted class="cardGameMain"></video> </div> ``` Where if there is a an extra image link (a new fourth column/variable in the games DB files) or a video link (fifth column/variable), then it would give that extra `<img>` or `<video>` and the extra class 'cardGameMainWrapper2'. However, if there isn't, then it would remain as it currently is: ``` <div class="cardGameMainWrapper"><img src="https://example.com/image2.jpg" class="cardGameMain"></img> </div> ``` (I'll be adding the CSS for the effects) Note: The csv files would need to be updated to add the two new variables ('secondary box art' and 'clip' let's say). I can handle that when it comes to it. Note: Keep in mind that the csv file may not have extra commas after the initial 2 commas, so hopefully that can be worked out, but if it can't, I'll see if i can re export everything with those needed extra commas

freakoverse added the

Kind/Feature

Priority

Low

labels 2024-11-17 22:13:55 +00:00

freakoverse added this to the Extra Features project 2024-11-17 22:13:55 +00:00

Sign in to join this conversation.