Styling Category Shortcode Grid – Scale / Overflow Hidden

  • Resolved hebhansen

    (@hebhansen)


    2 weeks, 1 day ago

    Hey Woo

    I am using shortcode for product categories. I have added a bit of css to scale the image icon on mouse-over. It appears overflow: hidden, will not work for me, so how can I crop the image to contain it within it’s space.

    Css (neither of the overflow kicks in):

    /*** product_categories - Grid Image Styling ***/
    .woocommerce ul.products li.product a img {
    	border-radius: 25px;
    	-webkit-transform: scale(1);
    	transform: scale(1);
    	-webkit-transition: .2s ease-in-out;
    	transition: .2s ease-in-out;
    }

    .woocommerce ul.products li.product a img:hover {
    	-webkit-transform: scale(1.1);
    	transform: scale(1.1);
    	overflow: hidden !important;
    }


    /**** Category Image Container in Grid ****/
      ul.awf-product-categories li.product-category,
      ul.awf-product-categories li.product-category.last,
      ul.awf-product-categories.columns-3 li.product-category,
      ul.awf-product-categories.columns-4 li.product-category,
      ul.awf-product-categories.columns-5 li.product-category,
      ul.awf-product-categories.columns-6 li.product-category {
    	position: relative;
    	margin: -3px 1px;
    	width: 24,5%;
    	overflow: hidden !important;
    }

    How can I fix this?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter hebhansen

    (@hebhansen)

    2 weeks, 1 day ago

    Object-fit does not work either:

    .woocommerce ul.products li.product a img:hover {
    	-webkit-transform: scale(1.1);
    	transform: scale(1.1);
    	object-fit: cover;
    }
    Plugin Support Zubair Zahid (woo-hc)

    (@doublezed2)

    2 weeks ago

    Hello hebhansen,

    Thank you for your contacting Woo support.

    Please note that custom-coded solutions are not covered by our support policy.
    But I will be happy to give you a general direction to help you achieve your goal.

    I visited a product category page but could not find any mouse hover effect on images.
    Could share a link to the correct page and also share some screenshots to help me understand?

    Looking forward to your response. 🙂

    Best regards.

    Thread Starter hebhansen

    (@hebhansen)

    2 weeks ago

    Hey Zubair

    I appreciate it. If you visit curations, you will see Category grids all over…

    Scale is good but icons overflow. All I wish is to keep it within container. Thx

    Also, is it possible to somehow make overlay text conform to container? Long words tend to break in odd places. I would prefer text larger, but also prefer one line per word. As you can see grids appear in varying sizes.

    • This reply was modified 2 weeks ago by hebhansen.
    Plugin Support Shameem (woo-hc)

    (@shameemreza)

    2 weeks ago

    Hi @hebhansen

    I checked your category page and noticed that there aren’t any icons appearing on hover. However, the design seems quite good to me.

    For reference, this particular forum is meant for general support with the core functionality of WooCommerce itself. For development and custom coding questions, it’s best to ask for insight related to those on either the WooCommerce Advanced Facebook group or the WooCommerce Community Slack. Many of our developers hang out there and will be able to offer insights into your question. You can also seek help from the following:

    I wish I could help more, but hopefully, this gets you going in the right direction to get some further insight/information.

    Thread Starter hebhansen

    (@hebhansen)

    2 weeks ago

    I’m waiting for Zubair’s reply thx.

    Design is fine. That’s not the issue. Did you read my first post? I don’t need a developer everytime one line of css does not work. I trust there is still community spirit around woo. I could be wrong.

    Posts in FB group goes unanswered and get lost. How about opening a forum on this site: Fixing Woo (WP has one on front), so that every post in woo does not get spammed with lectures of misbehaving and links to everywhere. Otherwise I would suggest, if there is no contribution to solving the issue presented, then don’t comment. Point is Woo does not come across particularly inviting as you consistently refer to commercial interests as opposed to a thriving community.

    Note: Grading that you are checking the source code for are attributes and not categories. So they are not the scope here. The scaling icons are the issue. Grading does not scale.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.