kayz100 Posted March 5, 2014 Share Posted March 5, 2014 Hi guys, Please help, my css image enlarge on mouse hover is not behaving. The main div is failing to center even though I have used margin:0 auto; I want it to enlarge image on hover without adjusting other div elements. I would love it to enlarge image with text, tried using javascript but no success. <html> <head> <style type="text/css"> .myimg { position:relative; width:50%; top:0px; } .myimg:hover { width:80%; z-index:9999; } .Enlrg ul {clear:both; list-style-type:none; } .Enlrg li {width:20%; float: left; overflow:visible; display: block; } </style> </head> <body> <div style="margin:0 auto; background:gray; width:80%;"> <div class="Enlrg"> <ul> <li><img class="myimg" src="pic1.jpg" alt="Rocasa Future classroom" /></li> <li><img class="myimg" src="pic2.jpg" alt="Rocasa Future classroom" /></li> <li><img class="myimg" src="pic3.jpg" alt="Rocasa Future classroom" /></li> </ul> </div> </div> </body></html> Quote Link to comment Share on other sites More sharing options...
denno020 Posted March 6, 2014 Share Posted March 6, 2014 (edited) Is this something like what you were after, http://jsfiddle.net/2ggL6/1/ Edited March 6, 2014 by denno020 Quote Link to comment Share on other sites More sharing options...
Triniton722 Posted March 13, 2014 Share Posted March 13, 2014 .myimg { position:relative; width:40%; top:0px; } .myimg:hover { width:80%; z-index:9999; ; margin-top: -10%; } Tyoe this inside the CSS file and it should work. I think the CSS it's pretty self explanatory. I hope I could help Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.