Pet Profile {Hovering Content}
Replies
Alright, so I am fairly new to the whole coding thing, and I have been fiddling around with a free premade layout, trying to learn how to do some things with the coding, but I am really interested in learning how to create a hidden content table that you can mouseover. I've already tried a few things that I found around on the forums, and tried to just figure it out myself sadly to no avail.
If anyone can give me a few tips and or tricks, that'd be awesome! I've been trying to find good learning tools as well!
Art by Myself
It took me a while to get all the content to work. The pet_minion was the worst one. Check out my leashed pet if you want. It goes something like this:
{ /add animation transition,you can make it slower./ transition:height 1s;-moz-transition:height 1s;-webkit-transition:height 1s;-o-transition:height 1s; left:230px; top: 430px; Width:390px;height:55px;display:block; Padding:0; overflow:auto; position:absolute; } /*set a small height. Overflow can be hidden if it wont scroll. You may use a background for the title, setting it to no-repeat and position top center. I think thats easiest. Or if you want to just add text, like this: / :before { content:"The Fridge";display:block;text-align:center;font-size:24px;padding-top:15px;padding-bottom:8px; } / the padding above is to manage where it goes vertically. Then, the magic: */
:hover * {visibility:visible;} /*you may look into using visibility instead of display. Usually display is used if you have a layout where the "button" goes instead of :before text or a background within the div */
:hover {height:250px;overflow:auto;}
Alright, so suppose I wanted to add a new content box entirely instead of the already available boxes. I've been having issues with adding in an entirely new table for content and it still working with the mouseover.
Art by Myself
If you'd like I can take a deeper look into the code. It was really late last night when I posted that.
It is a basic premade code that I found here in the forums, that I wanted to noodle around with an see if I could figure some things out, so sure!
So, the story begins...
consectetur adipiscing elit. Praesent lacinia rutrum orci, in finibus nulla pellentesque vitae. Morbi rhoncus nibh tortor, quis facilisis dui lobortis laoreet. Proin a magna libero. Vestibulum viverra maximus augue, at placerat tellus. Quisque turpis erat, porta quis scelerisque sit amet, eleifend at tellus. Praesent in nibh nec justo condimentum dignissim. Sed aliquet augue magna, ac consequat orci ultricies ac. Ut ornare quam vel libero porta laoreet. Morbi luctus quis erat non varius.
credits:
Art by Myself
I wanted to create an entirely new section to hover over for information; and possibly for links.
Art by Myself
ok, where will they go? Like to the left/right of what section? I'll code it in
for preview: https://subeta.net/pets/King+Chase
I would love them to the left! Oh goodness! Thank you so much!
Art by Myself
ok, feel free to refresh every 10 min or so. might take a moment
https://fonts.googleapis.com/css?family=La+Belle+Aurore|Lovers+Quarrel|Special+Elite do you still want to use this font? let me know where, I don't think it's activated
Yes, I would still like to use those fonts, if you can get them back in working order that would be great, otherwise I can fiddle with it and get them back to it.
Art by Myself
Here's how to use the fonts:
font-family: 'La Belle Aurore', cursive;
font-family: 'Special Elite', cursive;
font-family: 'Lovers Quarrel', cursive;
add one of them to the div/area where you want to use them. for example:
.container h1 {
font-family: 'Special Elite', cursive
;font-size:24px;
}
I didn't add the fonts since you have to choose where they go. Here's the coding: