riley
Junior Member
Posts: 58 
|
Post by riley on Mar 14, 2015 16:33:51 GMT
Request Site URL: No Way Out (Not Open Yet!) Type: Specific/Other Colors: None for the background, but if you want to use colours for a border or something then #a1c7b1 or #60887fFonts: Oswald for main headers, Verdana for general text things. Images: 100x100 Images would be great Mockup: Before hover: So simply two 100x100 images side by side. After hover: When you hover I want the two images to separate and change and also reveal a scrolling text box in the middle of them! Plugins: I have any plugin you need to make this work (style plugin already, but I can add any others) Other: THANK YOU SO MUCH |
|
riley
Junior Member
Posts: 58
|
Post by riley on Mar 14, 2015 16:43:12 GMT
NAME HERE [attr="class","rileyymeow"] [newclass=.rileyymeow]display:inline-block;padding-bottom:150px;width:150px;height:0;text-align:center;overflow:hidden;transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;[/newclass] [newclass=.rileyymeow:hover]width:150px;padding-bottom:0px;height:300px;transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;[/newclass] [newclass=.riles]opacity:0;transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;[/newclass] [newclass=.riles:hover]opacity:1;transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;[/newclass] |
|
riley
Junior Member
Posts: 58
|
Post by riley on Mar 14, 2015 16:47:25 GMT
[attr="class","scorch"]
TEST
[newclass=.scorch]display:inline-block;padding-right:0px;height:100px;text-align:center;overflow:hidden;transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;[/newclass] [newclass=.scorch:hover]padding-right:200px;height:100px;transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;[/newclass] [newclass=.slider]opacity:0;transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;[/newclass] [newclass=.slider:hover]opacity:1;transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;[/newclass] |
|
riley
Junior Member
Posts: 58
|
Post by riley on Mar 14, 2015 17:30:27 GMT
[attr="class","slider1"] [attr="class","scorch1"] test
[newclass=.slider1]opacity:0;transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;[/newclass] [newclass=.slider1:hover]opacity:1;transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;[/newclass] [newclass=.scorch1]display:inline-block;padding-right:0px;height:100px;width:100px;text-align:center;overflow:hidden;transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;background-image:URL('http://www.emoticonswallpapers.com/avatar/cartoons/Aladdin-surprised.jpg');[/newclass] [newclass=.scorch1:hover]padding-right:200px;height:100px;transition:width:100px; 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;background-image:URL('http://fbcdn.fupa.com/img.php?url=http://cdn.fupa.com/large/23271.jpg');repeat:no-repeat;[/newclass] |
|
riley
Junior Member
Posts: 58
|
Post by riley on Mar 21, 2015 1:54:21 GMT
[attr="class","slider1"] [attr="class","img1"] test [attr="class","img2"] [newclass=.slider1]opacity:0;transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;[/newclass] [newclass=.slider1:hover]opacity:1;transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;[/newclass] [newclass=.img1]display:inline-block;padding-right:100px;height:100px;width:100px;text-align:center;overflow:hidden;transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;background-image:URL('http://www.emoticonswallpapers.com/avatar/cartoons/Aladdin-surprised.jpg');[/newclass] [newclass=.img1:hover]padding-right:300px;height:100px;transition:width:100px; 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;background-image:URL('http://fbcdn.fupa.com/img.php?url=http://cdn.fupa.com/large/23271.jpg');repeat:no-repeat;[/newclass] [newclass=.img2]display:inline-block;margin-right:-100px;height:100px;width:100px;text-align:center;overflow:hidden;transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;background-image:URL('http://fbcdn.fupa.com/img.php?url=http://cdn.fupa.com/large/23271.jpg');float:right;[/newclass] [newclass=.img2:hover]padding-right:0px;height:100px;transition:width:100px; 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;background-image:URL('http://www.emoticonswallpapers.com/avatar/cartoons/Aladdin-surprised.jpg');repeat:no-repeat;float:right;margin-top:-5px;margin-right:-5px;[/newclass] |
|
