Help hidden hover tabs

[diablita]

I'm currently working on a magazine inspired code and I'm wondering how to put tabs in the code when the mouse key hovers over the image. I am experienced in CSS and I need a guide in order to not mess up my work and to be able to do this in the future with ease

Spoiler: the tiny bit of css

[nobr]
[class name="boxcontainer"]
height:630px;
width:500px;
padding:40px;
margin:auto;
overflow:hidden;
[/class]

[class name="box"]
padding:30px;
background:#f5f5f5;
transition:0.5s;
width:calc(100% -50px);
border-radius:1px;
[/class]

[class name="pbtitle"]
height: 370px;
width: 600px;
padding-left: 70px;
padding-top:-100px;
margin: auto;
font-size: 125px;
transform: rotate(-5deg);
position: relative;
top: -80px;
left: 10px;
text-align-last: justify;
color:#A40000;
overflow: hidden;
transition: 0.5s
[/class]

[class name="subpbtitle"]
height: 370px;
width: 600px;
padding-left: 70px;
padding-top:-0px;
margin: auto;
font-size: 45px;
position: relative;
top: -250px;
left: -40px;
text-align-last: justify;
color:#EF2929;
overflow: hidden;
[/class]

[class name="subpbtitle2"]
height: 370px;
width: 600px;
padding-left: -70px;
padding-top:-0px;
margin: auto;
font-size: 40px;
position: relative;
top: -295px;
left: 300px;
text-align-last: justify;
color:#EF2929;
overflow: hidden;
[/class]

[class name="cover"]
height: 505px;
width: 440px;
padding-top:-40px;
border-radius: 1%;
background-image: url(https://via.placeholder.com/350x150);
background-size: 140%;
background-position: 40% 0%;
position: relative;
[/class]

[div class="boxcontainer"][div class="box"]
[div class="cover"]
[div class="pbtitle"][font=Yesteryear]playboy[/font][/div]
[div class="subpbtitle"][font=Dorsa]gong yelin[/font][/div]
[div class="subpbtitle2"][font=Dorsa]¡pretty young thing![/font][/div]

[/div][/div][/div]
[/nobr]

 

[Alteras]

So you’re gonna need to use the scripts tag. [script name=CLASSNAME on=mouseenter] will be for when the mouse begins the hover. And having another script with on=mouseleave will be for when it no longer hovers.
In the two scripts, you’d probably have show TABSCLASS and hide TABSCLASS respectively.

 

[diablita]

So you’re gonna need to use the scripts tag. [script name=CLASSNAME on=mouseenter] will be for when the mouse begins the hover. And having another script with on=mouseleave will be for when it no longer hovers.
In the two scripts, you’d probably have show TABSCLASS and hide TABSCLASS respectively.

finally got it to work!
Thanks a bunch!