Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Resizing images on hover?

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #35202
    Arkitekt
    Participant

    Now i know the title seems like a pretty simple thing to do, my issue is this.

    Lets say I have a div that is 1000px wide. It is holding 4 images that align to make 1 large “banner”. We will say that each image is 250px wide, so that the 4 images fill the entire div completely. I would like to make it so that when you hover over 1 of the 4 images, it expands to say 700 pixels wide and the other images would “shrink” to 100 pixels wide each, thus causing the images to still be contained in the 1000px wide div.

    Say you hovered over the second image, I would like it to expand left and right, and the 1st image to shrink to 100px wide in the far left corner, while the 3rd and 4th image shrink to 100 pixels wide in the right corner beside each other…

    I think that is the easiest way i can explain it. I believe that this can be done with some CSS and possibly jquery…. I think that I have seen this somewhere, but i have now searched high and low and cannot find a solution.

    Can anyone advise me on the best practice to use to achieve this?

    Thanks in advance!

    -Clark

    #90783

    You can quite easily do this using the CSS3 property transform. The code would look something like this (remember to use all browser prefixes):

    .banner:hover img {
    transform: scale(.5);
    }
    .banner img:hover {
    transform: scale(1.25);
    }

    You could also add a transition to the effect by adding the following:

    .banner img {
    transition: transform .25s ease;
    }

    If you want something that has better browser support try something like this: http://jsfiddle.net/sl1dr/nemcg/

    #90814
    Arkitekt
    Participant

    i love you.

    Thanks!

    #90816
    Arkitekt
    Participant

    What if I want the height of the image/div to stay the same when i hover? I should have mentioned that. I want more of the image to be “revealed” left to right when you hover… same height would be shown the whole time..

    #90875

    Like so: http://jsfiddle.net/sl1dr/S7bdR/

    Using background-images instead of image elements I am able to reveal more of the image when hovering.

    #90876
    Arkitekt
    Participant

    You are just a BALLER aren’t you?

    Absolutely perfecto.

    Thanks for taking the time.

    -Clark

    #90877

    No worries Clark. Glad it was of use!

    #159754
    linuxmc
    Participant

    Hi guys, sorry to have to revive an old thread but this is EXACTLY what I’m looking for, but most of the jsfiddle.net links are dead! Does anyone have a working demo or script they could send me?

    Specificially the one created by joshuanhibbert where the divs are resized.

    Many thanks!
    Laurence

    #159760
    Paulie_D
    Member
    #159880
    noahgelman
    Participant

    @Paulie_D

    Minor flaw in your codepen, if you hover multiple images in a short time, there opens a gap on the right side. If the mouse goes over it before the gap closes, all the images stay shrunk.

    I did a quick edit and added a “catch” div behind the images. Should you happen to hover into that gap behind the images, the images will size back up to 25% which will cause you to hover an image and it’ll put you back where you should be.

    http://codepen.io/anon/pen/iqeAa

    #159927
    linuxmc
    Participant

    Paulie_D and noahgelman, thank you so much, works great!

    Would there be any way of making that little gap open in the first place? Not a big issue just for polishing purposes :)

    #159928
    Paulie_D
    Member

    Would there be any way of making that little gap open in the first place? Not a big issue just for polishing purposes :)

    Do you mean one of them is ‘wide’ by default?

    #159929
    linuxmc
    Participant

    Sorry, I meant NOT open up!

    Seems odd that it appears even though it doesn’t actually exist in the code…

    #159930
    noahgelman
    Participant

    @linuxmc

    Likely not with pure css. There might be some overly complex solution though.

    Much easier with js

    #159931
    linuxmc
    Participant

    Yeah I guessed it wouldn’t be a simple fix, and I’m certainly no javascript expert!

    Thanks again for your help guys

Viewing 15 posts - 1 through 15 (of 16 total)
  • The forum ‘CSS’ is closed to new topics and replies.