I am working on my first pet profile Dan Won The description is in a scrollbar but I want to change how the scrollbar looks. Is it possible to remove it but still be able to scroll? I have also tried to make a scrollbar overlay like here according to the CSS Compendium but it doesn't seem to work. Can someone help me and try to explain a newbie how to do it?

I also want an image to appear if I hover over a certain area, smiliar to this one but I have no clue how to do it.

Make a new div, put your image inside of it, and position it over the scrollbar to cover it up. Side note, you should give your background image repeat:no-repeat; and you need to add {display:none;}

Just take a look at their source code, look for . They position it how they want it, then change it to opacity:0; and on hover it changes to opacity:1;

Here's my code for scrollbars. Just take a look at my different pets to see it in action Also note that if your page scrolls, the scrollbar for the page itself won't have a transparent background and it'll be the background color of the page. So if you have a background, but the page,content background is say yellow, the background of the main scrollbar will be yellow. Any other scrollbars are transparent. ::-webkit-scrollbar {width: Xpx;} ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button🔚increment {height: 0px; display: block; background-color: transparent; } ::-webkit-scrollbar-track-piece {background-color:transparent; -webkit-border-radius: Xpx; } ::-webkit-scrollbar-thumb:vertical {background-color:; border:none; -webkit-border-radius:Xpx; }

And as said, if you want to know how to do something you see on someone else's profile simply look at the code and then come up with your own, it's not stealing it's taking notes. You can also check out w3 schools for explanations of things, like border radius, transform etc. and base codes. If you haven't been there it's a really awesome site and they even have a try it out feature so you can play around with codes.

For the hover, all you have to do is take your regular div, for example; {position:absolute; top:13px; left:777px; background:white; border:1px dotted black; width:200px; height:200px; overflow:hidden;} and then make it invisible, or almost invisible. {position:absolute; top:13px; left:777px; background:white; border:1px dotted black; width:200px; height:200px; overflow:hidden; opacity:0.2;} and then add whatever you want it to do when you hover. :hover {opacity:0.9; overflow:auto;}

Check out the minion and spotlight sections on my pet kiro to see that in action. And if you want it to go more smoothly, like the minion section of that second pet you mentioned, add this code to both the regular div and the hover. transition:all .7s; -moz-transition:all .7s; -o-transition:all .7s; -webkit-transition:all .7s; playing with the numbers on that will make it go slower or faster.