dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: Image Hover Position Shift - is it possible with CSS?

Hybrid View

  1. #1
    Join Date
    Jan 2013
    Location
    Winter Park, FL
    Posts
    26

    Image Hover Position Shift - is it possible with CSS?

    Im not exactly sure how to word what i want to do, but i will try. I didnt know how to create a CSS gallery by myself, so naturally i went looking for free code. I stumbled upon Dynamic Drives gallery, which is awesome, simple and did exactly what i need. since then i have used it in my site and the site i designed for my girlfriends photography company, but it (the code) has some drawbacks.

    The images only hover in one spot, and its fixed. I figured out how to create 2 seperate styles so that landscape and portrait images would have 2 different sizes using classes, (i used it on my girlfriends site, not mine, yet. been implementing other things.)

    What i want to try and do is figure out is there any way with CSS or a small amount of Javascript if there is a way so that the image will scroll with the page? The reason i ask is if i want to add more images to the gallery they will begin to go offscreen unless i add another column, which i can do, but i will eventually run out of room, so it would be nice if they could scroll.

    Or, if anyone knows a better/different gallery setup that isnt too complicated that might suit my site better, i would appreciate it.

    here is my site to get an idea of what im looking for.

    http://ryanblajda.com

  2. #2
    Join Date
    Mar 2013
    Location
    Denmark
    Posts
    14
    Hello Ryan blajda.
    I thought that maybe you could create a div with the images inside and give the div a fixed position together with a 10% margin from the top of the screen? Something like this:

    html:
    <div id="elantra">
    <img src="elantra08.jpg"
    </div>

    css:
    #elantra {
    position:fixed;
    margin-top:10%;
    }

    Hope it helped!

  3. #3
    Join Date
    Jan 2013
    Location
    Winter Park, FL
    Posts
    26
    Hey thanks for the fast reply. Im actually working on re-creating how my gallery is organized. instead of using a vertical image alignment i decided to change it to horizontal, and then have the hover image appear below or above the horizontal list of thumbnails.

  4. #4
    Join Date
    Mar 2013
    Location
    Denmark
    Posts
    14
    Sounds like a good plan, I will be sure to revisit your website sometime to follow up on the changes :-)

  5. #5
    Join Date
    Jan 2013
    Location
    Winter Park, FL
    Posts
    26
    yeah i just updated all the changes. i just have to update the picture dimensions to fit the new gallery scheme.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles