[nobr]
[class=container]
width: 320px;
height: 250px;
overflow: hidden;
margin: auto;
[/class]
[comment]-----------------background image (the one that moves when you hover over it)-----------------[/comment]
[class=image]
--url-for-bg-image: url('URL');
width: 320px;
height: 250px;
background: var(--url-for-bg-image);
background-size: 170%;
background-position: #% #%;
filter: brightness(110%) grayscale(70%);
box-sizing: border-box;
position: relative;
[/class]
[COMMENT]i have left it as "background-size: 170%;" but you may change this along with "filter: brightness(110%) grayscale(70%);" as you like[/COMMENT]
[class=color]
animation-name: {post_id}imagecolor;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]
[animation=imagecolor]
[keyframe=25]
filter: brightness(95%) grayscale(0%); background-size: 140%;
[/keyframe]
[keyframe=50]
filter: brightness(95%) grayscale(0%); background-size: 140%; background-position: #% #%;
[/keyframe]
[keyframe=100]
filter: brightness(95%) grayscale(0%); background-size: 140%; background-position: #% #%;
[/keyframe]
[/animation]
[COMMENT]you'll have to play around with the "background-position: #% -#%;" values here to see which ones work best for the background image you chose.
the values you input in "keyframe=50" should be different from "keyframe=100" i.e. mine were "50% -10%" and "100% -235%" respectively.
similarly, i've left it as "filter: brightness(95%) grayscale(0%);" and "background-size: 140%;" but you may change it as you please[/COMMENT]
[script class=image on=mouseenter]
addClass color image
addClass slidein picdiv
[/script]
[comment]-----------------sliding the box with pictures in-----------------[/comment]
[class=picdiv]
--colour-for-the-div-that-slides-in: rgba(#, #, #, 0.8);
position: relative;
width: 286px;
height: 62px;
background: var(--colour-for-the-div-that-slides-in);
transform: translate(320px, 38px);
display: flex;
justify-content: space-between;
align-content: space-between;
overflow: hidden;
box-sizing: border-box;
padding: 6px;
[/class]
[COMMENT]the the fourth value in the "rgba(#, #, #, 0.8);" defines opacity of your div. 1 means opaque and 0 means transparent. i have left it as 0.8 but you may change it as you wish[/COMMENT]
[class=slidein]
animation-name: {post_id}slideinpicdiv;
animation-duration: 2.25s;
animation-delay: 3.25s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;[/class]
[animation=slideinpicdiv]
[keyframe=100]
transform: translate(17px, 38px);
[/keyframe]
[/animation]
[comment]-----------------pictures in the box that slid in-----------------[/comment]
[class name=pic1 state=hover]
opacity: 1;
[/class]
[class name=pic2 state=hover]
opacity: 1;
[/class]
[class name=pic3 state=hover]
opacity: 1;
[/class]
[class name=pic4 state=hover]
opacity: 1;
[/class]
[class name=pic6 state=hover]
opacity: 1;
[/class]
[class=pic1]
--1st-smol-pic: url('URL');
background: var(--1st-smol-pic);
width: 50px;
height: 50px;
background-size: #% | #px | COVER | ETC;
background-position: #% #% | #px #px | CENTER | ETC;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]
[COMMENT]i know i have recommended "cover" as one of the "background-size" values but if you want the image to repeat when it elongates, i wouldn't recommend going with it; either "contain" or "#%" would work best[/COMMENT]
[class=pic2]
--2nd-smol-pic: url('URL');
background: var(--2nd-smol-pic);
width: 50px;
height: 50px;
background-size: #% | #px | COVER | ETC;
background-position: #% #% | #px #px | CENTER | ETC;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]
[class=pic3]
--3rd-smol-pic: url('URL');
background: var(--3rd-smol-pic);
width: 50px;
height: 50px;
background-size: #% | #px | COVER | ETC;
background-position: #% #% | #px #px | CENTER | ETC;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]
[class=pic4]
--4th-smol-pic: url('URL');
background: var(--4th-smol-pic);
width: 50px;
height: 50px;
background-size: #% | #px | COVER | ETC;
background-position: #% #% | #px #px | CENTER | ETC;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]
[class=pic6]
--6th-smol-pic: url('URL');
background: var(--6th-smol-pic);
width: 50px;
height: 50px;
background-size: #% | #px | COVER | ETC;
background-position: #% #% | #px #px | CENTER | ETC;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]
[comment]-----------------functions on the pictures (getting accordions to *open*)-----------------[/comment]
[script class=pic1 on=click]
hide pic2
hide pic3
hide pic4
hide pic6
addClass permspot picdiv
removeClass slidein picdiv
addClass incheight picdiv
fadeIn 800 hidden
fadeIn 900 scroll
fadeIn 1000 textbox
addClass activereturn home
removeClass permheight picdiv
removeClass decheight picdiv
removeClass tallpermsize pic1
removeClass decsize pic1
addClass smallpermsize pic1
addClass incsize pic1
[/script]
[script class=pic2 on=click]
hide pic1
hide pic3
hide pic4
hide pic6
addClass permspot picdiv
removeClass slidein picdiv
addClass incheight picdiv
fadeIn 800 hidden2
fadeIn 900 scroll2
fadeIn 1000 textbox2
addClass activereturn home
removeClass permheight picdiv
removeClass decheight picdiv
removeClass tallpermsize pic2
removeClass decsize pic2
addClass smallpermsize pic2
addClass incsize pic2
[/script]
[script class=pic3 on=click]
hide pic1
hide pic2
hide pic4
hide pic6
addClass permspot picdiv
removeClass slidein picdiv
addClass incheight picdiv
fadeIn 800 hidden3
fadeIn 900 scroll3
fadeIn 1000 textbox3
addClass activereturn home
removeClass permheight picdiv
removeClass decheight picdiv
removeClass tallpermsize pic3
removeClass decsize pic3
addClass smallpermsize pic3
addClass incsize pic3
[/script]
[script class=pic4 on=click]
hide pic1
hide pic2
hide pic3
hide pic6
addClass permspot picdiv
removeClass slidein picdiv
addClass incheight picdiv
fadeIn 800 hidden4
fadeIn 900 scroll4
fadeIn 1000 textbox4
addClass activereturn home
removeClass permheight picdiv
removeClass decheight picdiv
removeClass tallpermsize pic4
removeClass decsize pic4
addClass smallpermsize pic4
addClass incsize pic4
[/script]
[script class=pic6 on=click]
hide pic1
hide pic2
hide pic3
hide pic4
addClass permspot picdiv
removeClass slidein picdiv
addClass incheight picdiv
fadeIn 800 hidden6
fadeIn 900 scroll6
fadeIn 1000 textbox6
addClass activereturn home
removeClass permheight picdiv
removeClass decheight picdiv
removeClass tallpermsize pic6
removeClass decsize pic6
addClass smallpermsize pic6
addClass incsize pic6
[/script]
[comment]-----------------text boxes inside the accordions-----------------[/comment]
[class=hidden]
display: none;
width: 218px;
margin-left: 5px;
overflow: hidden;
[/class]
[class=scroll]
display: none;
width: 120%;
height: 166px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class=textbox]
box-sizing: border-box;
max-width: 218px;
display: none;
[/class]
[class=hidden2]
display: none;
width: 218px;
margin-left: 5px;
overflow: hidden;
[/class]
[class=scroll2]
display: none;
width: 120%;
height: 166px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class=textbox2]
box-sizing: border-box;
max-width: 218px;
display: none;
text-align: justify;
[/class]
[class=hidden3]
display: none;
width: 218px;
margin-left: 5px;
overflow: hidden;
[/class]
[class=scroll3]
display: none;
width: 120%;
height: 166px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class=textbox3]
box-sizing: border-box;
max-width: 218px;
display: none;
text-align: justify;
[/class]
[class=hidden4]
display: none;
width: 218px;
margin-left: 5px;
overflow: hidden;
[/class]
[class=scroll4]
display: none;
width: 120%;
height: 166px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class=textbox4]
box-sizing: border-box;
max-width: 218px;
display: none;
text-align: justify;
[/class]
[class=hidden6]
display: none;
width: 218px;
margin-left: 5px;
overflow: hidden;
[/class]
[class=scroll6]
display: none;
width: 120%;
height: 166px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class=textbox6]
box-sizing: border-box;
max-width: 218px;
display: none;
text-align: justify;
[/class]
[comment]-----------------holy shit okay these vvv are all the classes/scripts to get the accordion to open n close-----------------[/comment]
[class=permspot]
transform: translate(17px, 38px);
[/class]
[class=incheight]
animation-name: {post_id}picdivincheight;
animation-duration: 1s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]
[animation=picdivincheight]
[keyframe=100]
height: 178px;
transform: translate(17px, 17px);
[/keyframe]
[/animation]
[class=incsize]
animation-name: {post_id}incsizepic;
animation-duration: 1s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]
[animation=incsizepic]
[keyframe=100]
opacity: 1;
height: 166px;
width: 50px;
background-repeat: repeat;
cursor: auto;
[/keyframe]
[/animation]
[class=tallpermsize]
opacity: 1;
height: 166px;
width: 50px;
background-repeat: repeat;
cursor: auto;
[/class]
[class=decsize]
opacity: 0.8;
animation-name: {post_id}decsizepic;
animation-duration: 1s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]
[animation=decsizepic]
[keyframe=100]
height: 50px;
width: 50px;
cursor: pointer;
[/keyframe]
[/animation]
[class name=decsize state=hover]
opacity: 1;
[/class]
[class=smallpermsize]
height: 50px;
[/class]
[class=permheight]
height: 178px;
transform: translate(17px, 17px);
[/class]
[class=decheight]
animation-name: {post_id}decheightpicdiv;
animation-duration: 1s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]
[animation=decheightpicdiv]
[keyframe=100]
height: 62px;
transform: translate(17px, 38px);
[/keyframe]
[/animation]
[comment]-----------------function on the "back" button (getting accordions to *close*)-----------------[/comment]
[class=home]
opacity: 0;
height: 20px;
position: absolute;
top: 83%;
left: 8%;
background: transparent;
font-weight: bold;
line-height: 19px;
font-size: 17px;
text-transform: uppercase;
display: inline-block;
color: transparent;
transition: 1.5s all ease-out;
cursor: default;
[/class]
[COMMENT]i have my "back" button as transparent because it perfectly aligns with the "FOCUS ON ME" text, however, if you wish to make it visible, simply replace the "transparent" in "background: transparent;" with your desired colour.
similar, you can change the text colour (color: transparent;) from "transparent" to any colour of your choice as well if you wish for the text to be visible[/COMMENT]
[class=activereturn]
cursor: pointer; opacity: 0.8;
[/class]
[script class=home on=click]
removeClass activereturn home
addClass permheight picdiv
hide hidden
hide scroll
hide textbox
removeClass incsize pic1
addClass tallpermsize pic1
addClass decsize pic1
removeClass smallpermsize pic1
hide hidden2
hide scroll2
hide textbox2
removeClass incsize pic2
addClass tallpermsize pic2
addClass decsize pic2
removeClass smallpermsize pic2
hide hidden3
hide scroll3
hide textbox3
removeClass incsize pic3
addClass tallpermsize pic3
addClass decsize pic3
removeClass smallpermsize pic3
hide hidden4
hide scroll4
hide textbox4
removeClass incsize pic4
addClass tallpermsize pic4
addClass decsize pic4
removeClass smallpermsize pic4
hide hidden6
hide scroll6
hide textbox6
removeClass incsize pic6
addClass tallpermsize pic6
addClass decsize pic6
removeClass smallpermsize pic6
removeClass incheight picdiv
addClass decheight picdiv
fadeIn 900 pic1
fadeIn 900 pic2
fadeIn 900 pic3
fadeIn 900 pic4
fadeIn 900 pic6
[/script]
[comment]-----------------random ish-----------------[/comment]
[class=heading]
font-size: 12px;
line-height: 13px;
display: inline-block;
box-sizing: border-box;
padding: 0px 3px 3px 3px;
[/class]
[class=hdetails]
font-size: 12px;
line-height: 13px;
text-align: justify;
[/class]
[class=subheading]
font-size: 11px;
line-height: 12px;
display: inline-block;
box-sizing: border-box;
padding: 1px 2px 2px 3px;
margin-left: 5px;
[/class]
[class=sbdetails]
font-size: 11px;
line-height: 12px;
padding-left: 5px;
text-align: justify;
[/class]
[COMMENT]i explain more about these four ^^^ classes in the "text" spoiler[/COMMENT]
[comment]-----------------the acc code-----------------[/comment]
[div=width: 320px; text-align: right; margin: auto; font-size: 8px;]code by [USER=68743]@fudgecakez[/USER][/div]
[div class=container]
[div class=image]
[div class=picdiv]
[div class=pic1][/div]
[div class=pic2][/div]
[div class=pic3][/div]
[div class=pic4][/div]
[div class=pic6][/div]
[div class=hidden]
[div class=scroll]
[div class=textbox]
YOUR TEXT FOR 1ST DETAIL DIV HERE. DON'T FORGET TO ADD [br][/br] FOR LINE-BREAKS
[/div]
[/div]
[/div]
[div class=hidden2]
[div class=scroll2]
[div class=textbox2]
YOUR TEXT FOR 2ND DETAIL DIV HERE. DON'T FORGET TO ADD [br][/br] FOR LINE-BREAKS
[/div]
[/div]
[/div]
[div class=hidden3]
[div class=scroll3]
[div class=textbox3]
YOUR TEXT FOR 3RD DETAIL DIV HERE. DON'T FORGET TO ADD [br][/br] FOR LINE-BREAKS
[/div]
[/div]
[/div]
[div class=hidden4]
[div class=scroll4]
[div class=textbox4]
YOUR TEXT FOR 4TH DETAIL DIV HERE. DON'T FORGET TO ADD [br][/br] FOR LINE-BREAKS
[/div]
[/div]
[/div]
[div class=hidden6]
[div class=scroll6]
[div class=textbox6]
YOUR TEXT FOR 6TH DETAIL DIV HERE. DON'T FORGET TO ADD [br][/br] FOR LINE-BREAKS
[/div]
[/div]
[/div]
[/div]
[div class=home]
BACK
[/div]
[COMMENT]just because my text for the back/home button is "back", doesn't mean yours has to be too: change it up as you like ![/COMMENT]
[/div]
[/div]
[/nobr]