# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://partners.tray.com.br/themes/construindo-seu-template/referencias/componentes/exibir-a-segunda-imagem-ao-passar-o-mouse.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.