Flip images on hover bbcode

Sniper_E · Post by **Sniper_E** » Fri Oct 06, 2023 4:58 am

I've created a bbcode to flip between two images on hover. You can look at my test site's logo for flip example. (link in my sig)
I am having to place the css for this in my style's common.css because it want work in the html replacement.

My question... Is there a way to make the css work in the html replacement or will I have to create and extension for this?

BBCode usage

Code: Select all

[flip={URL1},{NUMBER1},{NUMBER2}]{URL2}[/flip]

HTML replacement

Code: Select all

<style>
.flip-bbcode {
	display: inline-block;
 }
.flip-bbcode .flip-box {
	background: transparent;
	width: 100%;
	height: 100%;
	perspective: 1000px;
}
.flip-bbcode .flip-box-inner {
	display: flex;
	position: relative;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: transform 1.0s;
	transform-style: preserve-3d;
}
.flip-bbcode .flip-box:hover .flip-box-inner {
	transform: rotateX(180deg);
}
.flip-bbcode .flip-box-front, .flip-bbcode .flip-box-back {
	position: absolute;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.flip-bbcode .flip-box-back {
	transform: rotateX(180deg);
}
</style>
<div class="flip-bbcode" style="width: {NUMBER1}px;height: {NUMBER2}px">
	<div class="flip-box">
		<div class="flip-box-inner">
			<div class="flip-box-front">
				<img src="{URL1}" alt="" />
			</div>
			<div class="flip-box-back">
				<img src="{URL2}" alt="" />
			</div>
		</div>
	</div>
</div>

Help line

Code: Select all

Flip image: [flip=front-image-url,width-number,height-number]back-image-url[/flip]

To set the height and width you use the largest size of the width and height from the two images.

cabot · Post by **cabot** » Fri Oct 06, 2023 5:15 pm

Hello,

You need to put it in an external file because it's not possible to have a <style> tag in <body> (so in the html replacement).
Effectively the best thing is to make an extension to load an external file rather than modify the style one, especially as the extension allows you to load this file on all styles.

Sniper_E · Post by **Sniper_E** » Fri Oct 06, 2023 7:12 pm

That's it cabot... use <style> for css not <script> I knew that, don't know where my mind was. Changed that to <style> and it all worked.

It is possible to have a <style> tag in the <body> and it is possible to have a <script> tag in the body. It's just not where they go.
Stylesheets belong in the <head> and Scripts belong in the footer. To do this proper I would have to make an extension for it.

Yet things don't always have to be proper. Thank you cabot for jogging my memory, you have been very helpful.
But I will put this in an extension to be proper.

cabot · Post by **cabot** » Sat Oct 07, 2023 8:39 am

Yep, when I said it's not possible, I was talking about inserting a <style> tag in the BBCode (because it's not W3C compliant). ^^

Sniper_E · Post by **Sniper_E** » Tue Oct 10, 2023 9:59 pm

Yes I'm with you there buddy. I'm very familiar with fixing W3C compliant issues.

Flip Extension is ready for testing.

phpBB • Free and Open Source Forum Software

Flip images on hover bbcode

Flip images on hover bbcode

Re: Flip images on hover bbcode

Re: Flip images on hover bbcode

Re: Flip images on hover bbcode

Re: Flip images on hover bbcode

advertisements