How can I move image in a div box on hover?

I have an image 50 x 1000 (tall/thin)
The div is 50 x 500
Now what I need is for the top half of the image to show only when the div is displayed normally, The rest of the image needs to be concealed.
But when I hover over the said div I need the image to slide up to show the bottom half within the same div.
I have toyed with clipping and absolute positioning but no joy
Thanks in advance ofr any feedback.
Terry

I actually updated the code in my post to make the ids into reusable classes, just in case you wanted more than one image, but it looks like you grabbed it before I made the change. Use that newer code with classes and add a wrapper element to contain the now floated <div> slide-containers (the bold parts below)...
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Image slides in on hover</title>
<style>
#wrapper {
    width:150px;
    margin:0 auto;
.slide-container {
    position: relative;
    height: 500px;
    float:left;
    width: 50px;
    overflow: hidden;
.sliding-image {
    position: absolute;
    bottom: -500px;
    -webkit-transition: bottom 500ms; /* half a second to transition, might want to up that to 1s-2s */
    transition: bottom 500ms;
.sliding-image:hover {
    bottom: 0px;
</style>
</head>
<body>
<div id="wrapper">
<div class="slide-container"> <img class="sliding-image" src="your-image1.jpg"> </div>
<div class="slide-container"> <img class="sliding-image" src="your-image2.jpg"> </div>
<div class="slide-container"> <img class="sliding-image" src="your-image3.jpg"> </div>
</div>
</body>
</html>

Similar Messages

  • I have an iMac running Yosemite 10.10.1 & Outlook 2011 for Mac.  For a while, sent emails went to a sent folder on the iMac so I have a collection of sent emails there.  How can I move them to a sent box on my server so I can see them on other devices?

    I have an iMac 3.2 GHz Intel Core i5 with 16 GB memory and 1.12 TB storage running Yosemite 10.10.1 & Outlook 2011 for Mac.  For a while, sent emails went to a sent folder on the iMac so I have a collection of sent emails there.  I have attempted to move those sent emails from the iMac to my email server (IMAP), but without success.  Is there a way to move them to a sent box on my server so I can see them on other devices?  Many thanks for any help you can provide.

    Go to: Apple > System Preferences > Universal Access and in the Seeing tab make sure that the Display Enhance contrast: is set to Normal.
    Alternatly, try holding the  ⌃⌥⌘ (control command alt) keys and then pressing the , (comma) key a few times.

  • How can we move images ??

    I created program where i used images.Can i have any chance that images can be moved from one end of screen to the other end of screen??

    Yup.
    [http://catb.org/~esr/faqs/smart-questions.html]
    [http://mindprod.com/jgloss/sscce.html]
    Use code tags to post codes -- [code]CODE[/code] will display asCODEOr click the CODE button and paste your code between the {code} tags that appear.
    db

  • How can I move/relocate images in Dreamweaver?

    Hello, I'm 16 years old and just went on a mission: My dad's shop has no website, and recently in school we've been taught the most basics of how to design a website. So I set myself a personal goal, to create a website for my dad! I know it will take time and I will be struggling alot, and here after about 20 minutes work I'm already stuck. How can I move images?
    I don't know what version of dreamweaver I'm using, but I only just downloaded it (30 days trial) from adobe.com so it must be the newest version.

    In DW Help Menu > About Dreamweaver shows the version and build #
    First, define  a local site folder. 
    Go to Site > New Site.   Tell DW where you want to keep your site files on your local hard drive.  See screenshot.
    Nancy O.

  • How can I move some image on JPanel ?

    How can I move some image on JPanel ?
    I want to move it with my arrow keys.
    Plees, give me example code

    1) Read the Swing tutorial on [url http://java.sun.com/docs/books/tutorial/uiswing/layout/index.html]Using Layout Managers. You would need to use Absolute Positioning so you can control the position of the image
    2) Add the image to a JLabel and the label to the panel
    3) Read the tutorial on [url http://java.sun.com/docs/books/tutorial/uiswing/misc/keybinding.html]How to Use Key Bindings. Then you just assign an Action to each of the arrow keys and use setLocation(...) to move the label.

  • How can I move an original Version from one Project to another Project?

    How can I move an original Version from one Project to another Project?

    From the Aperture User Manual:
    To move an image into a different project
    Drag the image [from the Browser] into another project in the Library inspector.

  • Can any one tell me how can I move to a different folder pictures, that I've cloned, without them staying aggregated? They all come together to the other folder and I don't want that- thanks

    Can any one tell me how can I move to a different folder pictures, that I've cloned, without them staying aggregated? They all come together to the other folder and I don't want that… thanks

    There's more to it than that.
    Folders in Aperture do not hold Images.  They hold Projects and Albums.  You cannot put an Image in a Folder without putting it in a Project or an Album inside that Folder.
    The relationship between Projects and Images is special:  every Image must in a Project, and can be in only one Project.
    Images can be in as many Albums you want.  Putting an Image in an Album does not move it from the Project that holds it.
    You can make as many Versions from a Master as you want.
    What you want to do may appear simple to you, but it still much adhere to how Aperture works.  I still can't tell exactly what you are trying to do (specifically: Images don't live in Folders; moving an Image from a Folder is non-sensical).
    It can be very confusing (and frustrating) to get going with Aperture -- but it does work, and can be enormously helpful.  If you haven't, take a look at the video tutorials on Apple's Aperture support site.
    I feel as though I haven't helped you much -- but we need to be using the same names for interface items in order to get anything done -- and my sense is that you still haven't learned the names of the parts.

  • Inadvertently moved my masters-how can I move them back?

    I'm hoping someone here can help me. I'm very new to Aperture, and somehow managed to move my masters for a bunch of my files out of the Aperture library. At least, I'm assuming that's what happened and caused the little red slash in the bottom right of the image previews. How can I move them back? I can locate the folder that I assume was created from the move. I'd be really grateful for any assistance.

    These were referenced or managed images? The only way to move them out of the library, and have Aperture not track the move, is to open the library package by right clicking and choosing "show package contents." This isn't easy to do accidentally.
    If they weren't managed, they wouldn't have been in the library. In this case, if you moved them around in the finder, then Aperture can loose track and you'll get the missing image icon. If that's the case, you'll need to right click on the image in Aperture and choose "Manage Referenced Files..". From there you can reconnect to your images. Once they are reconnected, and if you want them contained in your Aperture library as managed images, you can choose to "Consolidate Master..." from the "File" menu. This will move them into the Aperture library.

  • Can't MOVE images from one project to another: must not understand

    Greetings,
    I have two questions as a result of aperture not working the way that I have read on forums etc. and am wondering what i am doing wrong
    1) How do I MOVE images from project to project without duplicating masters or versions
    2) how do I delete versions
    All of my files are referenced.
    *1) moving from project to project*
    I have a blue folder called "NEFs." In it, I have a default project where I just dump all of my images called "00 dump." After I dump them, I organize into other projects. So, I do the following:
    • I create a new project called "2008 Thanksgiving" inside the NEFs blue folder making it a sibling to "00 dump"
    • I go back to "00 dump" select all the images that were shot over thanksgiving, and drag to the "2008 thanksgiving" folder. The images transfer fine, but when I go back to "00 dump" I see that the images have NOT actually moved, they are now sitting in both projects. How can this be? I thought that if I move images from project to project then I am actually moving the master, not replicating a version? That leads me to my next dilemma
    *2) how do I delete versions?*
    Now that I have replicated photos in my "2008 Thanksgiving" project, I want to delete them since I see them still sitting in "00 dump." I do the following:
    • select the "2008 Thanksgiving" project
    • select a number of images
    • press command + delete (this is the only way to delete a file as far as I can tell
    • popup comes up explaining that if I delete this file it will delete the master too and the reference file. So, that's exactly what it does.
    Deleting the referenced file is fine for many junk images, but in this case, I just want to delete the copied version that seems to be in two projects now. Any help would be greatly appreciated. I would really love a full understanding of how this structure works.
    -i

    When you drag images and the drop target is an actual little yellow project box (not a folder, and album or anything else) the images move from one project to another, if your drop target is not the actual project but something else within another project all you do is cause the version to show up there, nothing is duplicated.
    To delete a version or versions selected just use command-delete. This gets rid of the actual version not just removes it from the current album view. If it happens to be the last version of that master it will get rid of the master as well.
    Have a look at this:
    [Aperture 2 Organization|http://photo.rwboyer.com/2008/07/apple-aperture-21-organization>
    RB

  • How can I move videos from Revolution phone to mac?

    How can i move videos from Verizon Revolution to Mac? My computer is Mac os x version 10.5.8
    I have several videos that are too long to send via email, which is how I have been moving pictures and videos. I plugged it in using the USB port. The phone says I'm connected via usb. My mac brought up a box warning that the "cd connected" is not readable.

    Hi ..
    You can use the Image Capture app located in your Applications folder to import vidoe content from the phone to your Mac
    Instructions here >  Using a camera with your Mac - Apple Support
    If you have problems, make sure your Mac's software is up to date.
    Open System Preferences > App Store then click:  Check Now

  • HT4059 How can I move a book from one device to another

    How can I move an iBook from one device to another

    Now when I drag and drop the photo no red # shows up and the photo stays in project 1 and also shows up in project 2 apparently creating a duplicate.
    The projects are the basic containers.  Each image and all its versions are in exactly one project.
    You can use an image in many albums, without duplicating it, also in many products like books, screensaver, slideshows.  But the projects are the basic structure of the library and you cannot have the same image in two different project, without duplicating it by storing the same original image files twice. Use albums to organize your library thematically.
    Sorry, I misread your question.   Dragging an image file between projects should move the image and all its versions to the other project.  Aperture should only duplicate the image, if you hold down the alt/options key while dragging and move the image otherwise.
    Which Aperture version are you using? And which MacOS X version?  Is your profile signature "MacBook Pro with Retina display, Mac OS 9.2.x, Aperture 3.5.1" still valid?
    In Aperture 3.6 on MacOS X 10.10.1 dragging between projects is still working as expected:

  • How can I move a photo from one project to another

    How can I move a photo from one project to another without creating a duplicate so I have the same photo in two projects.
    I seems to me in the past when I moved the photo from project 1 to project 2, I would get a number showing the # of photos being moved and you could drag and drop in the 2nd folder and the photos would disappear from project 1 and show up in project 2. is there a setting I am missing.  Now when I drag and drop the photo no red # shows up and the photo stays in project 1 and also shows up in project 2 apparently creating a duplicate.
    Any suggestion?

    Now when I drag and drop the photo no red # shows up and the photo stays in project 1 and also shows up in project 2 apparently creating a duplicate.
    The projects are the basic containers.  Each image and all its versions are in exactly one project.
    You can use an image in many albums, without duplicating it, also in many products like books, screensaver, slideshows.  But the projects are the basic structure of the library and you cannot have the same image in two different project, without duplicating it by storing the same original image files twice. Use albums to organize your library thematically.
    Sorry, I misread your question.   Dragging an image file between projects should move the image and all its versions to the other project.  Aperture should only duplicate the image, if you hold down the alt/options key while dragging and move the image otherwise.
    Which Aperture version are you using? And which MacOS X version?  Is your profile signature "MacBook Pro with Retina display, Mac OS 9.2.x, Aperture 3.5.1" still valid?
    In Aperture 3.6 on MacOS X 10.10.1 dragging between projects is still working as expected:

  • How can I move and scale my photos

    How can I move and scale my photos so that I can use them for wallpaper?  After update, I'm no longer able to do this as much as I need to.  They just pop back to their original size or larger.

    You will either need to turn Settings > General > Accessibility > Reduce Motion 'on', or create a higher resolution versions of your images
    From http://support.apple.com/kb/HT5595 :
    When the parallax effect is on, you may notice the following:
    Wallpaper, icons, and alerts shift slightly as you move your phone.
    When you set a wallpaper in Settings > Wallpapers & Brightness, the photo or image will be slightly zoomed and can't be scaled to fit the screen.
    If you zoom in, you will need to rescale your wallpaper to fit to the screen. You can't rescale certain photo formats, including landscape or square images.

  • How can I move one years worth of Raw photo files to a different hard drive and perserve the edits

    How can I move one years worth of raw photo files to a different hard drive (to manage space) and preserve the develope module edits and still see them in  the Library module?

    The easiest situation, is where this year's worth of images is grouped physically inside one parent folder (something many people build in from the start, in any case).
    If there is a parent folder on disk, but you are not currently seeing that inside LR's Folders panel, you can make this visible to LR by right-clicking on one of the folders which live immediately inside that, and selecting "show parent folder". This gives you a single "handle" by which to manipulate the whole grouping.
    Then it is just a matter of moving this parent folder. It's usually as simple as dragging it from one place to another inside LR's Folders panel, however this is a little more difficult when it's a question of another drive which does not yet appear there.
    So an alternative method will likely prove more straightforward: physically move the whole year folder into the other drive using your operating system's Explorer/Finder. The folder (and subfolders, and all the contained images) will change with ? icons inside LR, and it all goes "offline". This is because LR's records of where everything is, are known not to currently work (the former location is now not available). But all the edits, thumbnails, keywords, collections etc are still in place because these things are still remembered in the Catalog - and the fullsize previews are still cached also.
    Then right-click on the parent folder in LR's Folders (the top folder which shows a "?") and select Update Folder Location. Then browse to the other disk and identify where this folder is now to be found. LR updates all its records and the whole grouping carries on just as before, only using a new  storage location for each image concerned.

  • Animation: how can I move objects (and their transform keyframes)?

    Hi,
    I have created a project with a group of layers which all move (have transform keyframes set up).
    Now I want to move the group, but when I do this and then run the animation, the position of all the transform keyframes I have set up remain in the same place.
    Is there some way to move a group of objects and the location of their transform keyframes at the same time, or will I have to go through each keyframe and move them individually?
    Thanks!
    Jack

    > PLEASEEE HELPP
    You need to get some understanding of HTML and CSS to know
    why building a
    web page is not like using a page layout program or even a
    word processor.
    Unfortunately that will require some effort on your part.
    You cannot just place things on the page in HTML - you need
    to build an HTML
    infrastructure to hold the elements you want to appear on the
    page, and to
    hold them in the location where you want them to appear. As a
    simple
    example, consider a 1 row by 2 column table, where each
    column is set to 50%
    width, and the table itself is 800px wide. An image placed
    into the second
    column will be located exactly 400px from the left margin of
    the page
    (assuming a) the image is less than 400px wide, b) the table
    has zero
    borders, cellspacing and cellpadding, and c) there is nothing
    wider than
    400px in the first column.
    Make sense?
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "afsheenm" <[email protected]> wrote in
    message
    news:fftbo8$cok$[email protected]..
    > hi, its my first time making the website so i have no
    clue about anything.
    > how
    > can i move text box? i mean i wrote something and want
    to move its
    > position
    > like up or down, how can i move it? also tables??????
    sometimes i can move
    > them
    > , by chance but i have no clue how i did it? PLEASEEE
    HELPP.
    >

Maybe you are looking for