Home Forums Basel – Premium Template Shop view mouse over images problem

This topic contains 18 replies, has 3 voices, and was last updated by Artem Temos Artem Temos 2 months, 1 week ago.

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #8140

    vanuch
    Participant

    Hello,

    We have some product images with transparent background. This is great for use with the dark theme option. But mouse over function in shop view simply loads another photo on top of the default one which means both are visible at the same time. This is not okay. Default image should be replace (meaning turn into not visible) when another image is loaded in mouse over.

    Please see attached images that illustrate the issue.

    Attachments:
    You must be logged in to view attached files.
    #8148
    Artem Temos
    Artem Temos
    Keymaster

    Hello,

    Thank you for your question.

    Could you please provide a link where we can see this issue live and try to find a solution?

    Kind Regards
    XTemos Studio

    #8155

    raul
    Participant

    I also have this issue. Link to shop on private content.

    Private Content Hidden
    #8161
    Artem Temos
    Artem Temos
    Keymaster

    Hi,

    Try to put the following code snippet to the Custom CSS in Theme Settings to fix this issue

    .product-element-top > a > img {
    	transition:0.3s all ease-in-out;
    	-webkit-transition:0.3s all ease-in-out;
    	-moz-transition:0.3s all ease-in-out;
    }
    
    .product-element-top:hover > a > img {
    	opacity:0;
    }

    Regards

    #8162

    raul
    Participant

    It worked, but the image is too small and doesn’t take up the whole space. It’s aligned to the top. How can we make it the same size of the other image?

    #8169
    Artem Temos
    Artem Temos
    Keymaster

    Sorry, but you can’t do images with different proportions have the same size using CSS. You just need to upload images in the same proportions to make them nice on your website.

    Regards

    #8556

    vanuch
    Participant

    This custom CSS solves the issue quite nicely. Thanks!

    PS. Idea for the future: perhaps add this as an option to the theme settings with more than one behaviour on mouse over and also support for handling transparent images. Maybe instead of showing the second gallery image there would be an option to zoom in (maybe even a custom specified %) instead and perhaps some other neat effects.

    #8557

    vanuch
    Participant

    And I found an error… It works nicely IF there are at least two images assigned (main product image + at least one in the gallery). If the product has a single image, then on mouse over no image is displayed at all (on mouse over the single assigned image will disappear). I find it better then the previous issue with transparency but still not 100% there. 🙂

    #8566
    Artem Temos
    Artem Temos
    Keymaster

    Could you please send us a link where we can see the product without images in gallery so we can help you?

    Regards

    #8743

    vanuch
    Participant

    Sure. I’ll send a link of a demo site we are developing.
    LINK.

    I know this install may not have an up-to-date version of the theme currently but I tested this out with an offline update install and the problem still remains.

    Private Content Hidden
    #8749
    Artem Temos
    Artem Temos
    Keymaster

    Hello,

    Try to replace previous code with this one

    .product-element-top > a > img {
    	transition:0.3s all ease-in-out;
    	-webkit-transition:0.3s all ease-in-out;
    	-moz-transition:0.3s all ease-in-out;
    }
    
    .product-element-top.with-hover:hover > a > img {
    	opacity:0;
    }

    and also add this snippet to the Custom JS section

    jQuery(document).ready(function() {
    jQuery('.product-element-top').has('.hover-img').addClass('with-hover');
    } );

    Write us about the results.

    #8751

    vanuch
    Participant

    This fixes the issue with the single image. If hovered, it does not disappear anymore.
    But now the original problem is back where transparent images load on top of the first image and both are showing at the same time. So back to square one.

    Please note that I am not testing this with the live version of the site I linked earlier.

    #8755
    Artem Temos
    Artem Temos
    Keymaster

    Ok, could you please provide a link where this code is added so we could check again?

    #8775

    vanuch
    Participant

    Oh, right, sorry. I will link a demo site where I am using the same theme to develop a new site until we get it ready, purchase a new license and copy to another domain.
    Under category “Radio” you can find one product with only one image as well.

    Private Content Hidden
    #8776
    Artem Temos
    Artem Temos
    Keymaster

    But the code is not added there also. Please, check it.

    #8793

    vanuch
    Participant

    I don’t understand because the code IS added there. See attached images.

    Attachments:
    You must be logged in to view attached files.
    #8809
    Artem Temos
    Artem Temos
    Keymaster

    As you can see from the screenshot code is not the same as we posted on forum. Please, check this and use the correct one.

    #8823

    vanuch
    Participant

    Seems that you were correct. Sorry, my bad. Though I’ve no idea how the older code got there as I copied both from the same place… Seems to work now like it should. Thanks!

    #8828
    Artem Temos
    Artem Temos
    Keymaster

    You are welcome!

Viewing 19 posts - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.