Lik
New Member
Posts: 21
inherit
232063
0
Dec 4, 2018 16:27:28 GMT -8
Lik
21
May 2016
likuu
|
Post by Lik on May 31, 2016 7:42:52 GMT -8
I'm having trouble finding a code that works for me, I'd like to be able to have an image over a scroll box and when I hover my mouse over that image the scroll box appears with text in it and such.
Can anyone show me how to do this? I will be putting it in my header on sidebar redux.
|
|
Lik
New Member
Posts: 21
inherit
232063
0
Dec 4, 2018 16:27:28 GMT -8
Lik
21
May 2016
likuu
|
Post by Lik on Jun 1, 2016 17:38:43 GMT -8
bump?
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on Jun 1, 2016 22:18:21 GMT -8
Hi Lik , I wasn't sure what size you were looking for but this should get you started. You can change the width and style it to your liking. It's kind of a bare bones hover code. Also, the scroll won't show until you add enough text to exceed the height you have. <style> /*this is the background you want to show before hover */ #the_hover_wrap{ position:relative; width:400px; height: 400px; background-color: white; opacity: 9; background-image:url(http://i657./uu300/EliteList/400x400/Zimba/Zimbi2-2_zpswrsypuy6.png); background-repeat:no-repeat; margin:auto; } .hover { background-color:#bbbbbb; width: 377px; height: 376px; padding:12px; opacity: 0; transition-duration: 2s; -moz-transition-duration: 2s; -webkit-transition-duration: 2s; overflow:auto; } .hover:hover{ opacity: .9; } .my_trans_cont{ font-size:12px; color:red; } </style>
<div id="the_hover_wrap"> <div class="hover"> <div class="my_trans_cont"> This is what will show on hover. You need to add enough content for the scroll bar to show </div> </div> </div>
Have any questions, just ask.
|
|
Lik
New Member
Posts: 21
inherit
232063
0
Dec 4, 2018 16:27:28 GMT -8
Lik
21
May 2016
likuu
|
Post by Lik on Jun 2, 2016 8:14:19 GMT -8
Thanks so much! Trying it out now and haven't found any issues so far! I will definitely get ahold of you if I do have any questions. Tumbleweed
|
|
Lik
New Member
Posts: 21
inherit
232063
0
Dec 4, 2018 16:27:28 GMT -8
Lik
21
May 2016
likuu
|
Post by Lik on Jun 2, 2016 8:17:39 GMT -8
Do you also maybe happen to have a code that I could use on sidebar redux for staff images? A picture then you hover over it and it shows their name and rank below their name? Tumbleweed
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on Jun 2, 2016 9:35:33 GMT -8
Do you also maybe happen to have a code that I could use on sidebar redux for staff images? A picture then you hover over it and it shows their name and rank below their name? Tumbleweed I can do something like that. Just give me a bit as I'm making soup and need to run down to the kitchen and finish making it. I'm starving. lol
|
|
Lik
New Member
Posts: 21
inherit
232063
0
Dec 4, 2018 16:27:28 GMT -8
Lik
21
May 2016
likuu
|
Post by Lik on Jun 2, 2016 9:38:16 GMT -8
Do you also maybe happen to have a code that I could use on sidebar redux for staff images? A picture then you hover over it and it shows their name and rank below their name? Tumbleweed I can do something like that. Just give me a bit as I'm making soup and need to run down to the kitchen and finish making it. I'm starving. lol Okay! Enjoy that soup xD Also guess my last post didn't go through, but with the hover image, it seems I can't use it in more than one spot? If I do it affects each one that I'm using it on, and causes them all to be the same size with the same images.
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on Jun 2, 2016 10:15:01 GMT -8
I can do something like that. Just give me a bit as I'm making soup and need to run down to the kitchen and finish making it. I'm starving. lol Okay! Enjoy that soup xD Also guess my last post didn't go through, but with the hover image, it seems I can't use it in more than one spot? If I do it affects each one that I'm using it on, and causes them all to be the same size with the same images. Well, I got my veggies chopped and it's cooking. I didn't realize you needed that hover for more than one. Dang, I forgot where I tested that code I gave you but try adding a 1 to the classes for your next one and if you want even more then the next would be 2: Like the css would be: <style> /*this is the background you want to show before hover */ #the_hover_wrap{ position:relative; width:400px; height: 400px; background-color: white; opacity: 9; background-image:url(http://i657./uu300/EliteList/400x400/Zimba/Zimbi2-2_zpswrsypuy6.png); background-repeat:no-repeat; margin:auto; } .hover { background-color:#bbbbbb; width: 377px; height: 376px; padding:12px; opacity: 0; transition-duration: 2s; -moz-transition-duration: 2s; -webkit-transition-duration: 2s; overflow:auto; } .hover:hover{ opacity: .9; } .my_trans_cont{ font-size:12px; color:red; } /*this is the background you want to show before hover */ #the_hover_wrap1{ position:relative; width:400px; height: 400px; background-color: white; opacity: 9; background-image:url(http://i657./uu300/EliteList/400x400/Zimba/Zimbi2-2_zpswrsypuy6.png); background-repeat:no-repeat; margin:auto; } .hover { background-color:#bbbbbb; width: 377px; height: 376px; padding:12px; opacity: 0; transition-duration: 2s; -moz-transition-duration: 2s; -webkit-transition-duration: 2s; overflow:auto; } .hover:hover{ opacity: .9; } .my_trans_cont1{ font-size:12px; color:red; } </style> And then the html: <div id="the_hover_wrap"> <div class="hover"> <div class="my_trans_cont"> This is what will show on hover. You need to add enough content for the scroll bar to show </div> </div> </div> <div id="the_hover_wrap1"> <div class="hover"> <div class="my_trans_cont1"> This is what will show on hover. You need to add enough content for the scroll bar to show </div> </div> </div> Or if the styles would be the same, the css could be: <style> /*this is the background you want to show before hover */ #the_hover_wrap , #the_hover_wrap1{ position:relative; width:400px; height: 400px; background-color: white; opacity: 9; background-image:url(http://i657./uu300/EliteList/400x400/Zimba/Zimbi2-2_zpswrsypuy6.png); background-repeat:no-repeat; margin:auto; } .hover { background-color:#bbbbbb; width: 377px; height: 376px; padding:12px; opacity: 0; transition-duration: 2s; -moz-transition-duration: 2s; -webkit-transition-duration: 2s; overflow:auto; } .hover:hover{ opacity: .9; } .my_trans_cont , .my_trans_cont1{ font-size:12px; color:red; } </style> I'm not positive that will work but have to run back downstairs so I'll be gone for a hour or so. Also, on that other thing you requested, would it be o.k. if you are inputting the name and group and style the colors yourself or is this something you want more auto-generated?
|
|
Lik
New Member
Posts: 21
inherit
232063
0
Dec 4, 2018 16:27:28 GMT -8
Lik
21
May 2016
likuu
|
Post by Lik on Jun 2, 2016 10:45:05 GMT -8
It would be okay! I can do that if need-be. c: Tumbleweed
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on Jun 2, 2016 11:17:30 GMT -8
It would be okay! I can do that if need-be. c: Tumbleweed Alrighty, below is the code. You can add as many as you like: <style> #staff{text-align:center;margin-bottom:8px; } #hover-content { width:200px;border:1px solid red; display:none; } #staff:hover #hover-content { display:block; }
</style>
<div id="staff"> <img src="http://placehold.it/150x150"> <div id="hover-content"> <div style="color:#ffff00;">Tumbleweed</div> <div style="color:#0000ff;">Administrator</div> </div> </div>
<div id="staff"> <img src="http://placehold.it/150x150"> <div id="hover-content"> <div style="color:#ff00ff;">Likuu</div> <div style="color:#0000ff;">Administrator</div> </div> </div>
<!--you can add more here-->
This part is where you add your image or avatar if you are using avatars: <img src=" placehold.it/150x150"> Did adding the 1 to the other code work or did you try yet?
|
|
Lik
New Member
Posts: 21
inherit
232063
0
Dec 4, 2018 16:27:28 GMT -8
Lik
21
May 2016
likuu
|
Post by Lik on Jun 2, 2016 11:47:10 GMT -8
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on Jun 2, 2016 11:51:41 GMT -8
I'm not sure what you mean. The links you provided are just images so not sure what you are showing me there. Can you maybe word it another way so my brain clicks as to what you are asking. Thanks. Maybe eating that big bowl of soup put my brain to sleep. lol
|
|
Lik
New Member
Posts: 21
inherit
232063
0
Dec 4, 2018 16:27:28 GMT -8
Lik
21
May 2016
likuu
|
Post by Lik on Jun 2, 2016 11:54:38 GMT -8
Maybe you'll understand what I mean with a gif?
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on Jun 2, 2016 18:56:54 GMT -8
Maybe you'll understand what I mean with a gif? All right, got it. Couldn't be any plainer than that! I'll see what I can do.
|
|
inherit
222840
0
Sept 30, 2022 1:09:20 GMT -8
Gking
34
June 2015
gaysareawesome
|
Post by Gking on Jun 2, 2016 20:37:47 GMT -8
|
|