Flip images on hover bbcode

Get help developing custom BBCodes or request one.
User avatar
Sniper_E
Registered User
Posts: 1173
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey

Flip images on hover bbcode

Post by Sniper_E »

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.
Last edited by Sniper_E on Fri Oct 20, 2023 8:49 pm, edited 3 times in total.
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
User avatar
cabot
Registered User
Posts: 733
Joined: Sat Jan 07, 2012 4:16 pm

Re: Flip images on hover bbcode

Post by cabot »

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.
User avatar
Sniper_E
Registered User
Posts: 1173
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey

Re: Flip images on hover bbcode

Post by Sniper_E »

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.
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
User avatar
cabot
Registered User
Posts: 733
Joined: Sat Jan 07, 2012 4:16 pm

Re: Flip images on hover bbcode

Post by cabot »

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). ^^
User avatar
Sniper_E
Registered User
Posts: 1173
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey

Re: Flip images on hover bbcode

Post by Sniper_E »

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

Flip Extension is ready for testing.
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:

Return to “Custom BBCode Development and Requests”