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>