skip to Main Content

I have problems getting this to work. I want to change image on mouseover/hoover but I cant get this to work.

<div class="image_wrapper">
    <div class="image_main">
        <a href="{{ url }}">          
             <img src="{% if product.images.size >= 1%}{{ product.featured_image | product_img_url: 'large' }}{% else %}{{ 'No_Image_2.png' | asset_url }}{% endif %}" alt="{{ product.title | escape  }}" />
        </a>
    </div>

{% if product.images.size > 1 %}
   <div class="image_main_hover">
       <img class="hidden" src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" />
   </div>
{% endif %}

2

Answers


  1. This is what i did in a shopify store. I had to do this way cause his images were different in sizes but he want them all to be same size.

    <div class="imgs" style="background-image: url('{{ product.featured_image.src | img_url: 'grande' }}');">
        {% if product.images.size > 1 %}
              <div class="imgs2" style="background-image: url('{{ product.images[1] | product_img_url: 'grande' }}')"></div>
        {% endif %}
    </div>
    

    css

    .imgs {
        width: 100%;
        height: 600px;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
    position: relative;
        overflow: hidden;
    }
    
    .imgs2 {
        opacity: 0;
        width: 100%;
        height: 600px;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: all 0.5s;
    }
    
    .imgs:hover .imgs2 {
        opacity: 1;
        transition: all 0.5s;
    }
    
    Login or Signup to reply.
  2. Edit your product-thumbnail.liquid

    Update below code:

    <div class="reveal">
      <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}"><!-- this is your original image tag -->
      <div class="hidden">
        <img src="{{ product.images.last | img_url: 'large' }}" alt="{{ product.images.last.alt | escape }}" />
        <div class="caption">
          <div class="centered">
            YOUR TEXT
          </div>
        </div>
      </div>
    </div>
    

    And here is css:

    .reveal .hidden { display: block !important; visibility: visible !important;}
    .product:hover .reveal img { opacity: 1; }
    .reveal { position: relative; }
    .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;  
    }
    .reveal:hover .hidden { 
      z-index: 2;
      opacity: 1;    
    }
    .reveal .caption {
      position: absolute;
      top: 0;  
      display: table;
      width: 100%;
      height: 100%;
      background-color: white; /* fallback for IE8 */
      background-color: rgba(255, 255, 255, 0.7);
      font: 13px/1.6 sans-serif;
      text-transform: uppercase;
      color: #333;
      letter-spacing: 1px;
      text-align: center;
      text-rendering: optimizeLegibility;
    }
    .reveal .hidden .caption .centered {
      display: table-cell;
      vertical-align: middle;
    }
    
    @media (min-width: 480px) and (max-width: 979px) {
      .reveal .caption { 
        font-size: 11px; 
      }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search