Immediate Shopify help - hover transitions not being applied
$10-30 USD
Sürüyor
İlan edilme: 4 yıldan fazla önce
$10-30 USD
Teslimde ödenir
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>
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 board and I assure you the great deal. Please initiate freelancer chat to discuss more on this project.