Post by Riley on Jan 18, 2015 20:32:36 GMT
[googlefont="Berkshire Swash"]
[newclass=.envy]opacity:0;transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;[/newclass]
[newclass=.envy:hover]opacity:1;transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;[/newclass]
[newclass=.envytwo]margin-top:5px;background:#eee;border:5px ridge #285054;display:inline-block;padding-bottom:20px;width:250px;height:0;text-align:center;overflow:hidden;transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;[/newclass]
[newclass=.envytwo:hover]margin-top:5px;background:#eee;border:5px ridge #285054;width:250px;padding-bottom:0px;height:100px;transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;[/newclass]
Character's Name
[attr="class","envy"]
Write Stuff! Scrolling Box! Blah-De-Blahhh!
[attr="class","envytwo"]
[break]Current Threads:
When the hover slides open, I'd like the pane to be no bigger than 150x100 from the edge of the image. That way, it shouldn't cause the last image to drop beneath the row. If it does, no big deal. Also, the images I provided dont have to be exact.. It's just a rough idea of what I'd like, but if you can come up with something with more flare, I'd love you for it..
[attr="class","envytwo"]
TEST
Relationships:
TEST
[newclass=.envy]opacity:0;transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;[/newclass]
[newclass=.envy:hover]opacity:1;transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;[/newclass]
[newclass=.envytwo]margin-top:5px;background:#eee;border:5px ridge #285054;display:inline-block;padding-bottom:20px;width:250px;height:0;text-align:center;overflow:hidden;transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;[/newclass]
[newclass=.envytwo:hover]margin-top:5px;background:#eee;border:5px ridge #285054;width:250px;padding-bottom:0px;height:100px;transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;[/newclass]