Search the Community
Showing results for tags 'rollover'.
Found 4 results
-
Hello, I have been using W3 tutorials to create custom code elements on my weebly website. Lately I have been having issues with a code I created from two separate tutorials: image roll over and responsive size. The code is situated within a greater grid created with weebly's building tools. Image rollover and responsive size work in W3's try it editor, but on my website only the rollover works. On a full size window everything looks just fine (the bottom left is the custom coded element) but a slighter smaller window results in a slide bar to view the full image, because it will not scale down. On a phone-scaled window, the opposite happens and it doesn't scale up, appearing significantly smaller. Any help would be much appreciated!!! I have included images and the latest code I've tried to show what's happening. Thank you!!!!! <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img{ width: 100%; height: auto; } .box{ width: 100%; height: auto; position: relative; display: inline-block; margin: 10px 0px 10px 0px; } .box .img-top { width: 100%; height: auto; display: none; position: absolute; top: 0; left: 0; z-index: 0; } .box:hover .img-top { display: inline; </style> </head> <body> <div class="box"> <img src="https://drive.google.com/thumbnail?id=1NJjBTmUClAxB3vqIDrDKzFTAF_HFqzHI" alt="Card Front"> <img src="https://drive.google.com/thumbnail?id=1XNQ_ARudR0M_hEuB3ErCyxDhHxSGKPMo" class="img-top" alt="box Front"> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img{ width: 100%; height: auto; } .box{ width: 100%; height: auto; position: relative; display: inline-block; margin: 10px 0px 10px 0px; } .box .img-top { width: 100%; height: auto; display: none; position: absolute; top: 0; left: 0; z-index: 0; } .box:hover .img-top { display: inline; } </style> </head> <body> <div class="box"> <img src="https://drive.google.com/thumbnail?id=1NJjBTmUClAxB3vqIDrDKzFTAF_HFqzHI" alt="Card Front" width="720" height= "720"> <img src="https://drive.google.com/thumbnail?id=1XNQ_ARudR0M_hEuB3ErCyxDhHxSGKPMo" class="img-top" alt="box Front"width="720" height= "720"> </div> </body> </html>
-
Hi Forgive me if this is answered on here. I cant find anything, but that's probably because I don't know the proper terminology to search for. If I explain what I want to do, perhaps a kindly sole might guide me in the right direction. I want to use a (single) picture of me and some buddies. I would like to have the user hover over each person, and have text information displayed while the mouse is within a defined area of the picture. I think I remember, during the stone age, Front page allowed the area to be selected with a mouse. I'm using notepad++ now, so like the wife says "I'm completely without a clue". Many thanks AJ
-
I'm trying to use a sprite for the first time, and I've done something wrong. <head> <style type="text/css">.csstest a{display: block;width: 500px;height: 750px;background: url(http://www.littlevictorian.com/wp-content/uploads/2013/11/SofaRolloverSprite.png);background-position: 0 0;}.csstest a:hover {background-position: -500px 0;} </style></head> <body><div class="csstest"><a href="http://www.littlevictorian.com/?p=1180"></a></div></body> Could someone please let me know what I'm doing wrong? Thanks!
-
Hi, Need some help here. I am trying to create a rollover image with CSS. The code I used is: a.about_hover {display: block;width: 86px;height: 79px;text-decoration: none;background: url("../images/about_button.gif");background-position: 0;} a.about_hover:hover {background-position: -86px;} It works fine, but seems to be showing only about half of the table cell. You can see what I am talking about at: www.pumpernickelpress.com/shop/index.php Any help is greatly appreciated.
