css for changing picture color and size

  • Hi there,

    I want a picture to change from grey scale to color when hover over it. Therefor I’ve added a css class to the picture and added customized css into the stylebook section in wp 6.2:

    .hover-color {
    filter: grayscale(100%);
    transition: all 0.2s ease-in-out;
    }
    .hover-color:hover {
    filter: grayscale(0%);
    }

    The picture now changes from grey to color when hover over it. But I also want to resize the picture inside the picture frame so that it appears a little more lifely when hover over it.

    I see this effect often on websites but unfortunately can’t figure out how to do this?

    I would be so happy and greatful if anyone could support me with a piece of code which fits to my needs :-))

    Best
    Chris

    • This topic was modified 1 year, 11 months ago by Jan Dembowski.
Viewing 7 replies - 1 through 7 (of 7 total)

  • Add transform: scale(x); to the .hover-color:hover selector.

    (Change x to any value greater than 1.)

    If it still doesn’t work, please provide the URL of the page with this image so we can check it out and provide a working code for you.

    Standing by.

    Thread Starter chrisesch

    (@chrisesch)

    Thx for your fast reply @gappia

    Because of your recommandation my css looks now like this:

    .hover-color {
    filter: grayscale(100%);
    transition: all 0.1s ease-in-out;
    }
    .hover-color:hover {
    transform: scale(1.1);
    filter: grayscale(0%);
    }

    Unfortunately it resizes the whole picture and not as intended the picture inside the picture frame.

    Thats the blog post with the picture. Please note that this is just a trial and not a released site:

    https://waa-lay2.cestudio.de/109-2

    Unfortunately it resizes the whole picture and not as intended the picture inside the picture frame.

    I don’t understand the effect you’re after then.

    Can you please provide an example URL where this effect you desire can be seen?

    Thread Starter chrisesch

    (@chrisesch)

    Sorry for being misleading . I hope I can describe it more clearly here:

    https://waa-lay2.cestudio.de/109-2

    Thread Starter chrisesch

    (@chrisesch)

    the description of the desired hover effect can be found down on the page https://waa-lay2.cestudio.de/109-2

    Maybe “zoom in” effect describes better what I’m looking for

    Thread Starter chrisesch

    (@chrisesch)

    … no assistance for “hover > zoom in” possible?

    Thread Starter chrisesch

    (@chrisesch)

    Thnx to https://w3bits.com/css-image-hover-zoom/ I finally found a css solution for zooming in:-)

    .img-hover-zoom is the css classe which I added to the picture block. And this is the additional css I’ve added to the site style / CSS:

    /* [1] The container hides the overflowing of child elements*/
    .img-hover-zoom {
    overflow: hidden; }

    /*[2] Transition property for smooth transformation of images */
    .img-hover-zoom img {
    transition: transform .5s ease;}

    [3] Finally, transforming the image when container gets hovered */
    .img-hover-zoom:hover img {
    transform: scale(1.05);}

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘css for changing picture color and size’ is closed to new replies.