Databases
StackOverflow2013
Postsdbo
POSpan and image size on hover enlarge
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSpan and image size on hover enlarge
    primarykey
    data
    text
    <p>I found an bit of css that allows you to enlarge the image on hover, and for the most part it works great.</p> <p>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.</p> <p><a href="http://jsfiddle.net/fj8hP" rel="nofollow">http://jsfiddle.net/fj8hP</a></p> <p>The jsFiddle does not play the same way as my site is... but it gives a better visualization of my problem.</p> <p>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</p> <pre><code>ul.enlarge2 span { position:absolute; height:10px; width:300px; } </code></pre> <p>the image will show at the desired size. I want it to be no larger than 100, and centred on the image. Any ideas?</p> <p>Here is the CSS:</p> <pre><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: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); } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBrettD
    1. USBrettD
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POSpan and image size on hover enlarge
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POSpan and image size on hover enlarge
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POSpan and image size on hover enlarge
      1. This table or related slice is empty.
      1. VTDownMod
    1. COYour HTML is invalid. The only allowable child of a UL is LI.
      singulars
      1. POSpan and image size on hover enlarge
      1. USisherwood
    2. COIt's not at all clear what you want. What does "the image will short at the desired size" mean? Please edit your question to clarify.
      singulars
      1. POSpan and image size on hover enlarge
      1. USisherwood
    3. COI meant it will show at the desired size. @isherwood
      singulars
      1. POSpan and image size on hover enlarge
      1. USBrettD
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload