CSS/DIV/Scrollbar Cover-Up and CSS Transition Help
Replies
So, I've hopped back into coding/graphic making on Subeta, and decided that to re-familiarize myself with certain aspects, I was going to go through W3 and teach myself some new tricks, or spruce up on some old.
Love the CSS Transition, I think it's awesome and super convenient. However, no matter what I do, mine will not ever transition horizontally, and even though I've seen it done, I can't see to STOP the "Insert Pet Name Here Has a Minion!" text from showing. Do I change the padding? Margins? I've even done my coding in the W3 "Try it Yourself!" pages, where it shows up horizontally, and what-not... but as soon as I put the coding in, BAM. It's back to being vertical. You can see the example H E R E, and here is the specific code I'm using for it:
{
position: absolute;
top: 220px;
left: 695px;
margin: 0px;
height: 15px;
width: 100px;
overflow: hidden;
font-variant: small-caps;
font-family: verdana;
color: ;
font-size: 7pt;
font-weight: bold;
background: url(http://i1254.photobucket.com/albums/hh606/niksheaffer/Minion-Hover_zps3bcb2309.png) no-repeat;
transition: height 2s;
-webkit-transition: height 2s;
}
:hover { height: 100px; }
Notice how the text is visible? Even though it's not supposed to show anything BUT the hover tab UNTIL hovered over? Yeah. Not to mention... it's going down, instead of transitioning to the right... mer...
Right-o. So, next, the layout I am coding right now is pretty neat. But the scroll bars? Totally destroys the "romantic" look. So, I've googled the whole "DIV Cover Up" deal for scroll bars, can't seem to get the darn thing to work. I know it's possible, I've seen it, and it's epic...but I apparently can't pull it off. I've tried making a new div id for the "story" itself, etc... nothing I seem to do works the way I want it to. Can someone please assist me with this? I'd be forever grateful.
hey, althoug I am not that good with the transition thing, I might be a help with the scrollbar overlay :) Actually it is as simple as it could be - a covering image. I did it several times on profiles and pet profiles. div-tag with a style-part defined where the scrollbar should go, how big etc. Like this
<style>
{background-image: url(http://i794.photobucket.com/albums/yy224/chiralein/wolpiscroll2_zps026a1632.png~original); background-repeat: none; position: absolute; top: 48px;
left: 653px; height: 384px; width: 35px; z-index: 1; background-position: right;}
</style>
<div id="scrollbar_over"></div>
;){kind=link}
What may work for your minion problem (credits go to sonata, she helped me with nearly the same problem!!)
<style>
{
position:absolute;
top: 220px;
left: 695px;
font-variant: small-caps;
font-family: verdana;
color: ;
font-size: 7pt;
font-weight: bold;
height:100px; width:0px; padding:0; overflow:hidden;
border-style:solid; border-color:transparent; border-width:0px 5px 0px 0px;
background-image: url(http://i1254.photobucket.com/albums/hh606/niksheaffer/Minion-Hover_zps3bcb2309.png);
background-position:-1px -1px;
transition:width 2s, margin-right 2s; -webkit-transition:width 2s, margin-right 2s; }
:hover { width:94px; margin-right:-94px; overflow:hidden; }
img { border-radius: 5px; border: 1px dashed ; height: 48px; width: 48px; }
</style>
;){kind=link}
Not sure how you want for the minion to move horizontally if you transition the height of that div XD You need to either put the transition on its width or hide it behind a non-transparent element and change its position.
The other option is either much easier to do or your only one if you want the text invisible when not hovered over.
Looking to adopt a December 31st, 1969 glitched date pet
- Wow. I have got to be quite the idiot. I was messing with the height and width in the inital coding, NOT THE HOVER. D'oh! Thanks a bunch!
- Awesome! I'm going to give that a try now. And SONATA IS AWESOME, she was super helpful with me as well. XD
Yeah indeed :) She is a truly gem!
That profile looks really nice now! But may I suggest something? The background is awesome, but at the part where the sun is, there the text is hardly to be seen and after a few seconds it starts to hurt in the eyes x_x (especially when there is a story to read, I assume that many will stop to read it after some lines)