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> Link to comment https://forums.phpfreaks.com/topic/286719-css-javascript-image-hover-on-mouse/ Share on other sites More sharing options...
denno020 Posted March 6, 2014 Share Posted March 6, 2014 Is this something like what you were after, http://jsfiddle.net/2ggL6/1/ Link to comment https://forums.phpfreaks.com/topic/286719-css-javascript-image-hover-on-mouse/#findComment-1471629 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 Link to comment https://forums.phpfreaks.com/topic/286719-css-javascript-image-hover-on-mouse/#findComment-1472521 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.