How do I make a textbox appear when I scroll over the banner

[Enapay]

I have a website with my friends. One of my friends made the banner turn black and white when you scroll over it. I want to add a textbox that appears when you scroll over it as well. I just want a simple textbox that I can build off of. What is the code for this and where do I put that said code?

[Star's Legacy]

Enapay,

[Craig]

If your friend can not help you further, could we get a link to your forum

[Enapay]

effervescentseas.proboards.com

[Tumbleweed]

Jul 28, 2016 7:46:07 GMT -8 Enapay said:

effervescentseas.proboards.com

As Star's Legacy posted, you should be able to just add text to the div where the hover is active. So I imagine in your wrapper template you need to find this div:


<div id="tuxie"></div>

No doubt you will need to add another divide so you can position the text that shows on hover so add the blue. Where it says hello you could actually add a whole table with info or just a bunch of text.


<div id="tuxie"><div id="text_hover">Hello</div></div>

And there looks to be also some css in the wrapper so add the blue to the css and of course change he style to your liking and the positioning. If there will be a lot of text in to replace the "hello" then you may want to add a width and height to that new id in the css.


<style>
#tuxie {
-webkit-transition: .5s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
width: 1071px; height: 286px;
background: url('http://storage.proboards.com/6563424/i/DvQVwOQWMh4QScSQ913m.png') no-repeat left top;
}
#tuxie:hover { background: url('http://i.imgur.com/HYkKAuu.png') }
#tuxie:hover #text_hover{position:relative; top:20px; left:100px; font-size:14px; color:black;}
</style>

[Enapay]

Thanks!

It is starting to come together, but I don't like that it just sits in the corner until I scroll over it. Basically, I want the banner to be normal. Then when you scroll over it, it goes dim (that part is already done) and after it goes dim a text box slides up from the bottom of the banner. I already have the text box.

[Tumbleweed]

Jul 29, 2016 10:04:01 GMT -8 Enapay said:

Thanks!

It is starting to come together, but I don't like that it just sits in the corner until I scroll over it. Basically, I want the banner to be normal. Then when you scroll over it, it goes dim (that part is already done) and after it goes dim a text box slides up from the bottom of the banner. I already have the text box.

That is what the positioning top and left were for so it wouldn't sit in the corner but anyway, you didn't say that in your first post about the sliding up thing. That will probably require animation using jquery and i have no time to mess with it tonight but maybe tomorrow.

Edit: Hey, Enapay , It's tomorrow and I had a chance to mess with this.

I borrowed your image to test this out. Something like this?

Test site

I think I lost your hover to gray though and will have to work that out.

[Enapay]

Jul 29, 2016 21:41:15 GMT -8 Tumbleweed said:

Jul 29, 2016 10:04:01 GMT -8 Enapay said:

Thanks!

It is starting to come together, but I don't like that it just sits in the corner until I scroll over it. Basically, I want the banner to be normal. Then when you scroll over it, it goes dim (that part is already done) and after it goes dim a text box slides up from the bottom of the banner. I already have the text box.

That is what the positioning top and left were for so it wouldn't sit in the corner but anyway, you didn't say that in your first post about the sliding up thing. That will probably require animation using jquery and i have no time to mess with it tonight but maybe tomorrow.

Edit: Hey, Enapay , It's tomorrow and I had a chance to mess with this.

I borrowed your image to test this out. Something like this?

Test site

I think I lost your hover to gray though and will have to work that out.

It is perfect! I don't need the hover to gray thing with this. Thanks so much! So, what is the coding?

[Tumbleweed]

Enapay ,

Here is the css: (It contains what you have plus what I added.) Oh and just remove that hover line since it doesn't work.



<style>
#tuxie {
-webkit-transition: .5s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
width: 1071px; height: 286px;

background: url('http://storage.proboards.com/6563424/i/DvQVwOQWMh4QScSQ913m.png') no-repeat left top;
}
#tuxie:hover { background: url('http://i.imgur.com/HYkKAuu.png') }

#monster {
background-color: rgba(105,100,100,0.5);
width:1055px;
height: 270px;
display:none;
position:absolute;
left: 0px;
bottom: 0px;
color:black;padding:8px;
}
#clickk {
width:1071px;
height: 286px;
background:transparent;
position:relative;
margin-right:auto;
margin-left:auto;
}
</style>        



And the blue is what I have right below the banner div. (Sorry, I used center tags as traditional css wasn't working.)

<div id="banner-container" role="banner">
<center>
<div id="clickk"><div id="tuxie"></div>
<div id="monster">

Your content here <br>
More content<br>


</div>
</div>
</center>




and put this at the very bottom of the wrapper template:


<script>
$("#clickk").hover(function () {
   $("#monster").slideDown("fast");
}, function() {
   $("#monster").slideUp("slow");
});

</script>


[Enapay]

Tumbleweed Thanks again! This is so great!

[Tumbleweed]

Jul 30, 2016 19:31:08 GMT -8 Enapay said:

Tumbleweed Thanks again! This is so great!

You're welcome. Let me know if you run into any snafu's.