Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 20, 2018 at 4:43 pm #1024356
    lopezsalaberry

    Hi there! I have seen you can change the preview picture for a product as explained here: https://kriesi.at/support/topic/change-image-on-mouseover/

    however, I’m wondering if there is a way to do the same but choosing a different picture to switch to. Just to clarify, I’d like the swapped image not to necessarily be the second image in the gallery but rather I.e. one that is not in the gallery or even one in the gallery that is maybe in 5th position.

    Is this possible?

    Thanks so much!

    October 20, 2018 at 5:50 pm #1024372
    Mike

    Hey lopezsalaberry,
    I believe this should be done with css, for my example I added a custom class to the image container of “image-link” and then used this css:

    .image-link:hover {
    background: url(https://127.0.0.1/2017demo1/wp-content/uploads/2017/02/people-1-6.jpg) !important; 
    background-repeat: no-repeat !important; 
    background-size: cover !important; 
    background-position: 50% 50% !important; 
}

    swap-image-on-hover.gif
    Please try to follow this format, if you need some assistance then please link to the page in question.

    Best regards,
    Mike

    October 22, 2018 at 4:53 pm #1024983
    lopezsalaberry

    Thank you Mike for jumping in to help. I really appreciate.

    So this is what I am trying to do. I would like, for example in the example provided in the private content, to have an image replace the product image when you hover. Now, I know you can do this with having it change to the following image (#2) in the gallery, but I’d love to know if it’s possible to have it change to, for example, an image that is not in the gallery.

    Hope it makes sense.

    Thanks again!

    October 23, 2018 at 6:15 am #1025244
    Mike

    Hi,
    You can change the image on hover to any image you wish by linking to the image in the css, in this example you will see that I targeted the one thumbnail by it’s post number, then I choose a link to a different image:

    li.post-816 .thumbnail_container:hover {
 background: url(https://127.0.0.1/2017demo1/wp-content/uploads/2017/02/people-1-6.jpg) !important; 
    background-repeat: no-repeat !important; 
    background-size: cover !important; 
    background-position: 50% 50% !important; 
}
li.post-816 .thumbnail_container:hover img.attachment-shop_catalog {
opacity: 0 !important; 
}

    Please see the screenshot in Private Content area of before hover & hover.
    Please try this code in the General Styling > Quick CSS field & change the url to the image you wish use.

    Best regards,
    Mike

    October 24, 2018 at 4:27 pm #1025969
    lopezsalaberry

    Thanks Mike! Worked like a charm.

    Should I be concerned about having too many of them in that css section (potentially one per each product in the store)? Or this should not be a problem?

    October 24, 2018 at 4:44 pm #1025984
    lopezsalaberry

    Would there be a way to do it with sprites to avoid the delay on hover? or can you think of another way to preload the images?

    Thanks!!!

    October 25, 2018 at 4:39 am #1026189
    Mike

    Hi,
    Well done, your images look good, here is a solution that might help:
    Better Image Preloading with CSS3
    in the article they talk about it being better than CSS Sprites, but you could try both.

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.