There’s two versions to this one, the standard triangles and the alternate one. The standard one uses a hover effect - hover over an image triangle to reveal the whole image. The Alt one the triangles are clickable with color and pulse effects over them on hover. Hover over the screen to expand the collapsed panels.
Feel free to alter the colors and change the images, as well as the background pattern. If you change the layout, then anything that breaks is on you to fix. Do not remove my signature link image or credit from the code.
#topbox { width:100px; height:50px; padding:20px; opacity:1; position:fixed; margin-top:50px; margin-left:10px; color:#fff; background:#000; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease;}
you can style these however you like - keep the background and text colours the same if you want it to look like the text only is changing ( i just did it like this so that you can see the change more obviously! ). to the top box, i’ve added a few extra lines - an ‘opacity 1′ to start with so that the bottom box is hidden beneath it. and also a transition so that when i hover over it, it’s a nice smooth ‘fade in/fade out’ effect...
then we add in another css section - this is the instruction to trigger the effect -
#topbox:hover { opacity:0; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease;}
this will make my ‘topbox’ completely transparent when hovered over, leaving only the bottom one, with your content visible.
