nemo_vbulletin3_import40708
New Member
I found an bit of css that allows you to enlarge the image on hover, and for the most part it works great.My problem is I have been dealing with all images of a certain size, and it worked great for them, now I am on another page with two different sizes, so I must make another css class.http://jsfiddle.net/fj8hPThe jsFiddle does not play the same way as my site is... but it gives a better visualization of my problem.The part above the image, the white box, seems to have a direct correlation with the image size. I had all short width and long images, so it was fine, but now I am dealing with wider images, and do not like the box spanning the whole image. So if I set the width to 300px in this part\[code\]ul.enlarge2 span { position:absolute; height:10px; width:300px;}\[/code\]the image will short at the desired size. I want it to be no larger than 100, and centred on the image. Any ideas?Here is the CSS:\[code\]ul.enlarge2 { list-style-type:none; /*remove the bullet point*/ margin-left:0;}ul.enlarge2 li { display:inline-block; /*places the images in a line*/ position: relative; z-index: 0; /*resets the stack order of the list items - later we'll increase this*/ margin:5px 10px 0 10px;}ul.enlarge2 img { background-color:#eae9d4; padding: 6px; -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75); -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75); box-shadow: 0 0 6px rgba(132, 132, 132, .75); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}ul.enlarge2 span { position:absolute; height:10px; width:100px; left: -9999px; background-color:white; padding: 10px; font-family:'Droid Sans', sans-serif; font-size:.9em; text-align: center; color: transparent; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .75)); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .75); box-shadow: 0 0 20px rgba(0, 0, 0, .75); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius:8px;}ul.enlarge2 li:hover { z-index: 150; cursor
ointer;}ul.enlarge2 span img { padding:2px; background:#ccc;}ul.enlarge2 li:hover span { top: 100px; /*the distance from the bottom of the thumbnail to the top of the popup image*/ left: 0px; /*distance from the left of the thumbnail to the left of the popup image*/}ul.enlarge2 li:hover:nth-child(2) span { left: -200px;}ul.enlarge2 li:hover:nth-child(3) span { left: -200px;}ul.enlarge2 img, ul.enlarge span { behavior: url(pie/PIE.htc);}\[/code\]
ointer;}ul.enlarge2 span img { padding:2px; background:#ccc;}ul.enlarge2 li:hover span { top: 100px; /*the distance from the bottom of the thumbnail to the top of the popup image*/ left: 0px; /*distance from the left of the thumbnail to the left of the popup image*/}ul.enlarge2 li:hover:nth-child(2) span { left: -200px;}ul.enlarge2 li:hover:nth-child(3) span { left: -200px;}ul.enlarge2 img, ul.enlarge span { behavior: url(pie/PIE.htc);}\[/code\]