# Exibir a segunda imagem ao passar o mouse

Snippet da listagem dos produtos para exibir a segunda imagem ao passar o mouse.

Validar se o tema utiliza a opção de **Edição do tema** com o **novo editor** ou o **antigo**. Se utilizar o **antigo**, o código deve ser o inserido no arquivo `settings.html`, caso utilize o **novo editor** o código deve ser inserido no arquivo `structure.json`. Para maiores informações sobre o Editor de temas [clique aqui](https://partners.tray.com.br/v/themes/construindo-seu-template/editor-do-tema).

**Editor antigo - HTML** para inserir no arquivo `settings.html`

{% tabs %}
{% tab title="HTML" %}

```html
<div class="item">
    <div class="box-option">
        <div class="msg">Exibir a segunda imagem ao passar o mouse?</div>
        <div class="list-radio flex">
            <label class="option flex align-center">
                <input type="radio" name="image_list" value="1">
                <div class="dot"></div>
                <div class="text">Sim</div>
            </label>
            <label class="option flex align-center">
                <input type="radio" name="image_list" value="0">
                <div class="dot"></div>
                <div class="text">Não</div>
            </label>
        </div>
    </div>
</div>
```

{% endtab %}
{% endtabs %}

**Novo Editor - JSON** para inserir no arquivo `structure.json`

{% tabs %}
{% tab title="JSON" %}

```json
{
  "label": "Imagem do produto",
  "fields": [
    {
      "label": "Exibir a segunda imagem ao passar o mouse?",
      "type": "toggle",
      "description": "",
      "field": "image_list"
    }
  ]
}
```

{% endtab %}
{% endtabs %}

**HTML** para inserir no arquivo `snippets/product.html`

{% tabs %}
{% tab title="HTML" %}

```html
<a href="{{ product.link }}" class="space-image{{ settings.image_list and product.images[1] and (not utils.is_mobile) ? ' second' }}">
    <img src="{{ product.images[0].large }}" alt="{{ product.name }}">
    {% if settings.image_list and product.images[1] and (not utils.is_mobile) %}
        <img src="{{ product.images[1].large }}" alt="{{ product.name }}">
    {% endif %}
</a>  
```

{% endtab %}
{% endtabs %}

**CSS** para ser incluso dentro do arquivo de estilo da loja, por exemplo o `style.css`

{% tabs %}
{% tab title="CSS" %}

```css
.product .space-image {
    display: block;
    position: relative;
    overflow: hidden;
    height: 200px;
}

.product .space-image img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
}

.product .space-image.second img:nth-child(2) {
    opacity: 0
}

.product:hover .space-image.second img:nth-child(1) {
    opacity: 0
}

.product:hover .space-image.second img:nth-child(2) {
    opacity: 1
}
```

{% endtab %}
{% endtabs %}

Lembrando que se o tema utiliza o CSS minificado, o mesmo deve ser aplicado para esse item também. \
Faça as alterações no arquivo CSS e salve. Para que as modificações sejam refletidas na loja é necessário atualizar o arquivo CSS minificado, o **style.min.css**. Copie todo o código do arquivo **style.css** e utilize uma ferramenta de minificação de CSS. Recomendamos a ferramenta CSS Minifier. Você pode acessar ela clicando [aqui](https://www.toptal.com/developers/cssminifier).

Copie o código minificado gerado pela ferramenta e cole no arquivo **style.min.css** sobrescrevendo todo o conteúdo já existente. Salve as alterações utilizando o botão salvar.