Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div>
- <div>
- <img src="/bc.jpg" width="54" height="54" id="bc-icon" alt="test1" />
- <span><strong>test1</strong><br />dfgsertsrytwsertyrtyrsty</span>
- </div>
- <div>
- <img src="/bb.jpg" width="54" height="54" id="bb-icon" alt="test2" />
- <span><strong>test2</strong><br />dsfgsdfgsdfgsdfgsdfgsdfgsdfg</span>
- </div>
- <div>
- <img src="/rd.jpg" width="54" height="54" id="rd-icon" alt="test3" />
- <span><strong>test3</strong><br />dfgdfgdsfgsdfgsdfgsdfgsdfgsdfg</span>
- </div>
- <div>
- <img src="/bl.jpg" width="54" height="54" id="bl-icon" alt="test4" />
- <span><strong>test4</strong><br />dsfgsdfgsdfgsdfgsdfgsdfg</span>
- </div>
- </div>
- div {clear:both; padding:0 0 8px 0; border:none; width:576px;}
- div div { float:left; margin: 0 8px 0 0; padding:0; width:56px; clear:none; overflow:visible; position:relative; background-color:#B22222;}
- div div img { padding:1px; cursor:pointer; display:block;}
- div div span { background-color:#89A7BA; position:absolute; bottom:26px; left:-19px; padding:5px 10px; font-family:'MS Sans Serif',Geneva,sans-serif; border:2px solid #FFF; font-size:12px; display:none;}
- div div span img { position:absolute; bottom:-18px; left:34px;}
- div div span strong {font-size:14px; text-transform:uppercase;}
- $.fn.hoverAnimation = function() {
- return $(this).each(function() {
- return $(this).hover(function() {
- $(this).find("span").slideDown(100);
- $(this).css("background-color", "#000");
- }, function() {
- $(this).find("span").slideUp(100);
- $(this).css("background-color", "#B22222");
- });
- });
- }
- $("div > div").hoverAnimation();
- span {z-index:200}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement