Cave Name Box

/* Codes made by Pandora #144118 and Kat .:Red Lion of Voltron:. #94329
Codes may be edited, used in commissions or for personal use
Please do not remove credit
*/

a[href$="unsorted.php?id=USERID"]>div.cave-grid {
height: #px!important; /* This is to get rid of the text portion below the cave normally */
}

a[href$="unsorted.php?id=USERID"]>.cave-grid::after {
content: 'CAVENAME'!important;
display:block;
background-color: rgb(#,#,#); /* This is for the background square of the text. You can also use #HEXCODE like so - background-color: #000000; */
color: rgb(#,#,#); /* This is the text color. You can also use #HEXCODE like so - color: #000000; */
padding: #px #px; /* This is how far from the edge of the background-color the text is. It goes xpx ypx */
transition: all .#s ease-out!important; /* How fast you want the text to fade in and out */
border-radius: #%; /* If you want rounded corners to the background-color square */
top: y#%; /* How far from the top of the cave image you want the text to show up */
left: x#%; /* How far from the left of the cave image you want the text to show up */
transform: translate(-x#%, -y#%); /* Moves the cave name box */
position: absolute!important;
opacity: 0;
}



/* PREGNANT LIONESSES */
a[href$="nesting.php"]>div.cave-grid>img {
content: url('IMAGEURL')!important;
height: #px!important; /* If you want to change the height of the cave image - Note, this distorts the image I believe */
transition: all .#s ease-out!important; /* How fast you want the image to fade in and out */
}

a[href$="nesting.php"]>div.cave-grid {
height: #px!important; /* This is to get rid of the text portion below the cave normally */
}

a[href$="nesting.php"]>.cave-grid::after {
content: 'CAVENAME'!important;
display:block;
background-color: rgb(#,#,#); /* This is for the background square of the text. You can also use #HEXCODE like so - background-color: #000000; */
color: rgb(#,#,#); /* This is the text color. You can also use #HEXCODE like so - color: #000000; */
padding: #px #px; /* This is how far from the edge of the background-color the text is. It goes xpx ypx */
transition: all .#s ease-out!important; /* How fast you want the text to fade in and out */
border-radius: #%; /* If you want rounded corners to the background-color square */
top: y#%; /* How far from the top of the cave image you want the text to show up */
left: x#%; /* How far from the left of the cave image you want the text to show up */
transform: translate(-x#%, -y#%); /* Moves the cave name box */
position: absolute!important;
opacity: 0;
}



/* PRIDE OVERVIEW */
a[href$="lionoverview.php?id=USERID"]>div.cave-grid>img {
content: url('IMAGEURL')!important;
height: #px!important; /* If you want to change the height of the cave image - Note, this distorts the image I believe */
transition: all .#s ease-out!important; /* How fast you want the image to fade in and out */
}

a[href$="lionoverview.php?id=USERID"]>div.cave-grid {
height: #px!important; /* This is to get rid of the text portion below the cave normally */
}

a[href$="lionoverview.php?id=USERID"]>.cave-grid::after {
content: 'CAVENAME'!important;
display:block;
background-color: rgb(#,#,#); /* This is for the background square of the text. You can also use #HEXCODE like so - background-color: #000000; */
color: rgb(#,#,#); /* This is the text color. You can also use #HEXCODE like so - color: #000000; */
padding: #px #px; /* This is how far from the edge of the background-color the text is. It goes xpx ypx */
transition: all .#s ease-out!important; /* How fast you want the text to fade in and out */
border-radius: #%; /* If you want rounded corners to the background-color square */
top: y#%; /* How far from the top of the cave image you want the text to show up */
left: x#%; /* How far from the left of the cave image you want the text to show up */
transform: translate(-x#%, -y#%); /* Moves the cave name box */
position: absolute!important;
opacity: 0;
}



/* CAVES (COPY AND PASTE TO ADD MORE) */
a[href$="CAVEID"]>div.cave-grid>img {
content: url('IMAGEURL')!important;
height: #px!important; /* If you want to change the height of the cave image - Note, this distorts the image I believe */
transition: all .#s ease-out!important; /* How fast you want the image to fade in and out */
}

a[href$="CAVEID"]>div.cave-grid {
height: #px!important; /* This is to get rid of the text portion below the cave normally */
}

a[href$="CAVEID"]>.cave-grid::after {
content: 'CAVENAME'!important;
display:block;
background-color: rgb(#,#,#); /* This is for the background square of the text. You can also use #HEXCODE like so - background-color: #000000; */
color: rgb(#,#,#); /* This is the text color. You can also use #HEXCODE like so - color: #000000; */
padding: #px #px; /* This is how far from the edge of the background-color the text is. It goes xpx ypx */
transition: all .#s ease-out!important; /* How fast you want the text to fade in and out */
border-radius: #%; /* If you want rounded corners to the background-color square */
top: y#%; /* How far from the top of the cave image you want the text to show up */
left: x#%; /* How far from the left of the cave image you want the text to show up */
transform: translate(-x#%, -y#%); /* Moves the cave name box */
position: absolute!important;
opacity: 0;
}