CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
BrettD
BrettD

Reputation: 379

Span and image size on hover enlarge

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/fj8hP

The 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

ul.enlarge2 span {
    position:absolute;
    height:10px;
    width:300px;
}

the image will show at the desired size. I want it to be no larger than 100, and centred on the image. Any ideas?

Here is the CSS:

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:pointer;
}
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);
}

Upvotes: 1

Views: 1737

Answers (1)

btevfik
btevfik

Reputation: 3431

you need to put the text inside span1 and put whats in ul.enlarge2 span into a new tag in css for span1. that way you can manipulate that white box easier. also you need display:block and margin:0 auto to make span1 to get centered. 

ul.enlarge2 span{
position:absolute;
left: -9999px;
background-color:white;
}

this is all you need in that part everything else goes into span1 tag.

here is the fiddle with a different picture http://jsfiddle.net/JVQp7/

it is probably not the most elegant way of doing this and it might not validate as i have put div inside span etc.

if you want the box to appear before image put span1 before it. http://jsfiddle.net/JVQp7/1/

Upvotes: 1

Related Questions