Request: Header Hover Images

[bai]

I searched PB (about 10 out of 25 pages) and even Google to find a code that fits my specific needs for having approx. 3 images appear over my forum header when the mouse hovers, but all of them are for tables that include staff, awards, and RPG info. On top of that the ones that semi-worked didn't work completely because my layout templates are set up very different from theirs and I had no idea how to adapt the code.

Can anyone help at all? I just need to be able to have three images.

[ᴘʀɪɴᴄᴇ ᴄᴜᴘɪᴅ]

have you tried removing the code for tables etc. that come in pre-made ones and placing the image there instead?

[bai]

Jul 17, 2018 15:41:54 GMT -8 ᴘʀɪɴᴄᴇ ᴄᴜᴘɪᴅ said:

have you tried removing the code for tables etc. that come in pre-made ones and placing the image there instead?

I tried it on a few and it seemed to jack it up even more. Do you have any particular codes on this forum you would recommend? A few of the codes were from 2013, though I'm not sure if that makes a difference.

[Nori]

At it's absolute simplest, to get a hover over banner you only need to do a couple things.

In the Forum Wrapper Layout Template...
+ Find the line: '<div id="banner-container" role="banner">'
+ Replace everything inside that div so it looks like the below...

<div id="banner-container" role="banner">
<div id="banner-hover">
<center>
<img src="http://via.placeholder.com/250x150">
</center>
</div>
</div>

Go into the Advanced Styles & CSS. At the bottom you need to essentially have this...

/* Hover Banner Styles */
#banner-hover {
height: 160px;
background: rgba(0,0,0,.1);
opacity: 0;
padding: 7px 10px;

transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}

#banner-hover:hover { opacity: 1; }

... Anything in red you can replace to whatever you want, and you can add more styling and etc to fit your needs. I didn't put anything but a single placeholder image in the Layout template cause I dunno what else you're doing. But basically whatever you want to show up in the Hover goes on the layout template, and if you want anything applied to the base, such as a background image, put it into the banner-base's CSS section.

[bai]

Jul 17, 2018 20:08:19 GMT -8 Nori said:

At it's absolute simplest, to get a hover over banner you only need to do a couple things.

In the Forum Wrapper Layout Template...
+ Find the line: '<div id="banner-container" role="banner">'
+ Replace everything inside that div so it looks like the below...

<div id="banner-container" role="banner">
<div id="banner-hover">
<center>
<img src="http://via.placeholder.com/250x150">
</center>
</div>
</div>

Go into the Advanced Styles & CSS. At the bottom you need to essentially have this...

/* Hover Banner Styles */
#banner-hover {
height: 160px;
background: rgba(0,0,0,.1);
opacity: 0;
padding: 7px 10px;

transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}

#banner-hover:hover { opacity: 1; }

... Anything in red you can replace to whatever you want, and you can add more styling and etc to fit your needs. I didn't put anything but a single placeholder image in the Layout template cause I dunno what else you're doing. But basically whatever you want to show up in the Hover goes on the layout template, and if you want anything applied to the base, such as a background image, put it into the banner-base's CSS section.

it works but it completely took away the existing header pic I have. I was looking for an overlay.

[Nori]

So add the image into the CSS as I mentioned... "...and if you want anything applied to the base, such as a background image, put it into the banner-base's CSS section." (though I errored and called it banner-base at the end ^^; sorry. Should be banner-container)


#banner-container { background-image: @banner_background_image; }

Or whatever the url to the images is

[bai]

Jul 18, 2018 8:01:57 GMT -8 Nori said:

So add the image into the CSS as I mentioned... "...and if you want anything applied to the base, such as a background image, put it into the banner-base's CSS section." (though I errored and called it banner-base at the end ^^; sorry. Should be banner-container)


#banner-container { background-image: @banner_background_image; }

Or whatever the url to the images is

ahh i was clearly not reading carefully. sorry!

[Nori]

No worries! I did misspell it xD I blame the heat.

Hope it all works for you and if you need anything else we're here :3 Cheers!