Completed

Immediate Shopify help - hover transitions not being applied

I have applied transitions in the CSS and product collections code but it does not seem to be applied.

Shopify site, the idea is the show the second product image upon hover. This is completed successfully. The hover transitions, however, are not being applied.

I will provide access to the Shopify site, but here is the code:

CSS:

.has-secondary.grid-view-item__link [login to view URL]{

display:none;

transition: opacity 650ms ease-in-out;

-moz-transition: opacity 650ms ease-in-out;

-o-transition: opacity 650ms ease-in-out;

}

.has-secondary.grid-view-item__link:hover [login to view URL]{

display:block;

transition: opacity 650ms ease-in-out;

-moz-transition: opacity 650ms ease-in-out;

-o-transition: opacity 650ms ease-in-out;

}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{

display:none;

transition: opacity 650ms ease-in-out;

-moz-transition: opacity 650ms ease-in-out;

-o-transition: opacity 650ms ease-in-out;

}

Collections Page:

<div class="grid-view-item{% unless [login to view URL] %} product-price--sold-out grid-view-item--sold-out{% endunless %}">

<a style="transition: opacity 650ms ease-in-out; moz-transition: opacity 650ms ease-in-out; o-transition: opacity 650ms ease-in-out; " class="grid-view-item__link {% if [login to view URL] > 1 %} has-secondary{% endif %}" href="{{ [login to view URL] | within: collection }}">

<img class="grid-view-item__image" src="{{ [login to view URL] | img_url: grid_image_width }}" alt="{{ [login to view URL] }}">

{% if [login to view URL] > 1 %}

<img class="secondary" src="{{ [login to view URL][1] | img_url: grid_image_width }}" alt="{{ [login to view URL][1].alt | escape }}">

{% endif %}

<div class="grid-view-item{% unless [login to view URL] %} product-price--sold-out grid-view-item--sold-out{% endunless %}">

<div class="h4 grid-view-item__title">{{ [login to view URL] }}</div>

{% if section.settings.show_vendor %}

<div class="grid-view-item__vendor">{{ [login to view URL] }}</div>

{% endif %}

<div class="grid-view-item__meta">

{% include 'product-price' %}

</div>

</a>

</div>

</div>

Skills: Shopify Templates, CSS, Shopify, Javascript, HTML

See more: javascript hover transitions, include access queries html page, shopify help, immediate css help, freelance shopify help, logo design and shopify help, cheap shopify help, hire shopify help, web developer shopify help, shopify help forum, narrative theme shopify help, shopify help robots txt, kit shopify help, set up paypal shopify help, shopify help center app, shopify app hover effect, immediate homework help, shopify help documentation, shopify help chat, facebook marketing app shopify help

About the Employer:
( 1 review ) Seattle, United States

Project ID: #21929627

Awarded to:

webstorm555

Hello, Can start to work immediately .. I have just read your requirements and I am really interested in your project. I have mastered in shopify / css and have a lot of experience. This is a piece of cake for me. More

$30 USD in 1 day
(40 Reviews)
6.6

10 freelancers are bidding on average $33 for this job

chrisjackson3

How are you? I read your job description with interest and understood your requirements exactly. Can you please show me your site? So i can check in detail. Let's discuss friendly. I have rich experiences built a More

$30 USD in 1 day
(415 Reviews)
7.7
sunilsunil02

Hi, Greetings of the day!!! Thanks for reading my application. ✅ This is in accordance to the job proposal and that I have what you are looking for – a Shopify expert. ✅ I have designed and developed many Shopify More

$30 USD in 7 days
(11 Reviews)
5.6
goldenths

Dear Employer. Thank you for the opportunity to apply for the Shopify Developer role at your project. I've read your job description and I'm ready to work for you. Let's fix your problem quickly. I’m a Shopify guru wi More

$30 USD in 1 day
(24 Reviews)
4.7
anitasheladiya16

Hi, I have 7+ years of experience in Web developing and very energized to provide my solutions for your job. I went through your requirements I can solve this Hover issue within few minutes. Once discussed in message More

$22 USD in 1 day
(14 Reviews)
4.1
ninestar801

Hi, I have gone through your requirements and I can do this task. The skills and resources needed for this project are in my genes. I can assure you for a complete professional work in given time [login to view URL] share comp More

$90 USD in 7 days
(5 Reviews)
2.7
JanKuhn1

Oh, I see. But I have some problem. I need more description. If I found your bug, I will need to confirm. Hello! I am a senior web developer with higher experience of JavaScript and CSS. I can help you. If you want, pl More

$20 USD in 1 day
(2 Reviews)
2.5
VHK0

Hello, It is because of the others side. As a talented Shopify expert, I have been working in Shopify for 6+ years and have all the skills Shopify. I feel fit for your project and you will be satisfied with my working. More

$20 USD in 1 day
(3 Reviews)
2.1
akiramatsui0305

Dear, gentleman! @ Please Contact me! @ I can do it immediately. I am a full time freelancer and I will work hard on this till completion. An Expert Website developer on freelancer.com and I do not bid on project More

$30 USD in 1 day
(0 Reviews)
2.2
imasharma83

**Immediate start** Hello, I have gone through your job requirements and understood that you are looking for a Shopify expert. I have designed and developed many Shopify stores from scratch, theme customization an More

$30 USD in 1 day
(0 Reviews)
0.0