Databases
StackOverflow2013
Postsdbo
POVertically position an image inside a div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POVertically position an image inside a div
    text
    copied!<p>I have a problem I'd like some help with. Thankfully my code can be flexible, so I'll just give some generic markup. </p> <p>My major limitation (due to the way I am retrieving the information from a database) is that the images CANNOT be background images, otherwise this would be easy. </p> <p>I simply want an image to change when I hover over it. I have made an image twice as high as I need it - half colour, half black and white. The idea is, the image is exactly the same (a person) - but when you hover over it - you see the colour version. </p> <p>I have constructed my 'hover' image 200 pixels wide, and 400 pixels high. It is marked up very simply:</p> <pre><code>&lt;div class='staff_profile'&gt; &lt;h3&gt;Staff Title&lt;/h3&gt; &lt;div class='staff_image'&gt; &lt;img src='.....' alt='....' /&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>So I am figuring I need something like:</p> <pre><code>.staff_image { float: left; height: 200px; width: 200px; } </code></pre> <p>The trouble is - using this, the 400px high image displays by default in the centre of that staff_image div - so I see half the black and white photo, and half the colour. </p> <p>I am going to be using jQuery to do the hover - so just need some CSS tips on what properties I need to use to:</p> <ol> <li>Have the image display at the very top</li> <li>Have the image display from halfway down</li> </ol> <p>Everything I try with padding and margin seems to push all content down, and doesn't move the actual picture inside at all. I basically need to know how to maneuver an image that is too tall for a fixed height div around WITHIN that div. And none of the answers I can find here seem to help. There are lots of them on centering an image - but centering is NOT what I want to do - it's the opposite! :)</p> <p>Thanks for any help. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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