Problems implementing Mouse-Over on Brooklyn theme! Help me!

New Member
16 0 0

Hi everyone, I'm troubling to implement a mouse-over on my collection page. I followed this guide:

https://help.shopify.com/themes/customization/collections/add-hover-effect-to-product-images#reveal-...

 

Now, if I follow step by step, I see 2 pics at the same time on my products.

If I change a bit the code of my theme, I can see appear the second image on my first, and see them together.

On mobile the second image is over sized in height. 

 

Where can I place the code of the stylesheet? 

What can I change in the product-grid-item.liquid file before the image code?

 

Thank you so much,

Simone

 

 

0 Likes
Shopify Expert
2683 67 676

Hi Simone, 

it is hard to tell what is a problem without looking at the actual pages.  But let's have a look:

<div class="reveal">
  <img src="..." />
  <img class="hidden" src="..." />
</div>

Generally, the idea behind this code is that  the reveal has a position: relative; property and hidden  has a position:absolute; property.

This makes the hidden image to be put at the same place where the first image is. Then, dynamically changing opacity and z-index on hover you make visible either first or second images. 

For this to work best you need your images  to have exaclty the same size.

So, I'd check the position properties of these elements first.

NB! If you're experimenting with an unpublished theme you can actually share a link to it by right-clicking the preview button, selecting "Copy link address" and pasting it here. Should look like http://your-store.myshopify.com/?preview_theme_id=164556810

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
16 0 0

Hi tim, thanks for your reply! 

If I place that code like the guide, I can see the following code in my product-grid-item.liquid:

<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}">
  <div class="grid-product__wrapper">
    <div class="grid-product__image-wrapper">
      <a class="grid-product__image-link" href="{{ product.url | within: collection }}">
        
        <div class="reveal">
        <img src="{{ product | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" class="grid-product__image">
        <img class="hidden" src="{{ product.images.last | product_img_url: 'large' }}" alt="{{ product.images.last.alt | escape }}" />
        </div>
        
      </a>

 

Maybe I should remove some standard code of my theme before the <div class="reveal"> ?

And where can I put the CSS in the stylesheet? Maybe in the theme.scss.liquid?

 

Thank you for the help!

Simone

0 Likes
Shopify Expert
2683 67 676

Yep, everything looks right.

Note, that the html changes alone will not work, CSS is the crucial part. Put the CSS part of the tutorial code at the very bottom of the theme.scss.liquid Asset.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
16 0 0

I replaced this:

<div class=“grid-product__image-wrapper”>

with this one:

<div class=“reveal”>

 

And it actually work, but i see the second image oversized and in low quality (notably on mobile).

How to correct this?

 

Thank you

0 Likes
Shopify Expert
2683 67 676

Actually those 2 classes (reveal and grid-product__image-wrapper) have the same single property -- position: relative ;)

Now, I would do this:

1. On the second image assign class="hidden grid-product__image"  instead of only hidden

2. Change class hidden  to remove these properties: top, width and heigth -- they will be controlled by the grid-product__image class.

3. Replace 'large' in <img lines with 'grande'

Keep in mind that the picture of glasses is more square than the picture of the girl. 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
16 0 0

1. Changing the class to "hidden grid-product__image" make the second image not centered.

2. How to change the class hidden?

3. Replacing with "grande" don't make any difference.

0 Likes
Shopify Expert
2683 67 676

1+2. Yes, you have to remove those properties from the css styles of hiddden class (what you've pasted  to the theme.scss.liquid) or comment out, as here:

.reveal .hidden {
    position: absolute;
    z-index: -1;
/*    top: 0;
    width: 100%;
    height: 100%; */
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out
}

3. It should. You may try '900x' but this may be too much. However, on some images it can be less obvious, while the file size will double from 'grande' to '900x'.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
16 0 0

Thank you so much tim! 

Everything is working out now!

The 900x is perfect cause our pics are very small file size.

0 Likes
Shopify Expert
2683 67 676

Congrats!

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes