悬停图像比原始图像大得多

Question

当您将鼠标悬停在 Shopify 中的原始图片上时，我试图显示第二张图片和文本。现在出于某种原因，当我将鼠标悬停时，第二张图片会展开并比原始图片占用更多 space（当两者大小相同时）。我附上 CSS 片段。

原始容器css:

.custom-content1{
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 width: 100%;
 -ms-flex-align: center;
 -webkit-align-items: stretch;
 -moz-align-items: stretch;
 -ms-align-items: stretch;
 -o-align-items: stretch;
 align-items: stretch;  
 -webkit-flex-wrap: wrap;
 -moz-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 width: auto;
 margin-bottom: -$gridGutter;
 margin-left: -$gridGutter;}

悬停css:

.reveal .hidden { 
  display: block !important; visibility: visible !important;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.image:hover .reveal img { opacity: 20%; }

.reveal { position: relative; 
 }
.reveal .hidden { 
  position: absolute; 
  z-index: -1;
  top: 0; 
  width: 100%; 
  height: 100%; 
  text-align: center;
  vertical-align: middle;
  
  opacity: 100%;
  -webkit-transition: opacity 0.1s ease-in-out;
  -moz-transition: opacity 0.1s ease-in-out;
  -o-transition: opacity 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out;  
}
.reveal:hover .hidden { 
  z-index: 100000;
  opacity: 100%;
   color: #ffff !important;
}

如何确保悬停时图像与原始图像完全相同 space？任何帮助或指示都会有所帮助。谢谢！

P.S 添加 html 和液体部分：

<div class="custom-content1">
{%- assign max_height = '' -%}
{%- assign block_width = '' -%}
{%- assign block_width_mobile = '' -%}

{% for block in section.blocks %}
  {% case block.settings.width %}
    {% when '25%' %}
      {%- assign max_height = 250 -%}
      {%- assign block_width = 'medium-up--one-quarter' -%}
      {%- assign block_width_mobile = 'small--one-whole' -%}
    {% when '33%' %}
      {%- assign max_height = 345 -%}
      {%- assign block_width = 'medium-up--one-third' -%}
      {%- assign block_width_mobile = 'small--one-whole' -%}
    {% when '50%' %}
      {%- assign max_height = 530 -%}
      {%- assign block_width = 'medium-up--one-half' -%}
      {%- assign block_width_mobile = 'small--one-whole' -%}
    {% when '66%' %}
      {%- assign max_height = 720 -%}
      {%- assign block_width = 'medium-up--two-thirds' -%}
      {%- assign block_width_mobile = 'small--one-whole' -%}
    {% when '75%' %}
      {%- assign max_height = 810 -%}
      {%- assign block_width = 'medium-up--three-quarters' -%}
      {%- assign block_width_mobile = 'small--one-whole' -%}
    {% when '100%' %}
      {%- assign max_height = 1290 -%}
      {%- assign block_width = 'medium-up--one-whole' -%}
      {%- assign block_width_mobile = 'small--one-whole' -%}
  {% endcase %}

  

  {% if block.type == 'image' %}
    {% capture img_id %}CustomImage--{{ forloop.index }}-{{ block.settings.image.id }}{% endcapture %}
    {% capture img_wrapper_id %}CustomImageWrapper--{{ forloop.index }}-{{ block.settings.image.id }}{% endcapture %}

    {% unless block.settings.image == blank %}
      {% include 'image-style', image: block.settings.image, height: max_height, wrapper_id: img_wrapper_id, img_id: img_id %}
    {% endunless %}
  {% endif %}
    
  <div class="custom__item1 custom__item1--{{ block.type }} custom__item1--{{ block.id }} {{ block_width_mobile }} {{ block_width }}{% if block.settings.alignment %} align--{{ block.settings.alignment }}{% endif %}" {{ block.shopify_attributes }}>
    <div class="custom__item1-inner custom__item1-inner--{{ block.type }}"{% if block.type == 'image' %} id="{{ img_wrapper_id }}"{% endif %}>
       
      {% case block.type %}
        
        {% when 'image' %}
          {% if block.settings.image != blank %}
          {% if block.settings.image_link != blank %}
          <a href="{{block.settings.image_link}}">
          <div class= "reveal">
            {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <!--<div style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%;" data-image-loading-animation>
            </div>-->
              <img id="{{ img_id }}"
                   class="custom__image1 lazyload js"
                   data-src="{{ img_url }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ block.settings.image.alt | escape }}">
            
            {%- assign img_url2 = block.settings.image_2 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
              <img class="hidden custom__image1 lazyload js"
                   data-src="{{ img_url2 }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ block.settings.image.alt | escape }}"/>
                        
            <div class="text-center medium1-up--text-{{ block.settings.align_text }} ">
            {%- assign image_text = block.settings.image_text -%}
              <h4 class="hidden h31 rte-setting rte1">{{image_text}}</h4>
            </div>
           
           

            <noscript>
              {% capture image_size %}{{ max_height }}x{% endcapture %}
              {{ block.settings.image | img_url: image_size, scale: 2, crop: 'top' | img_tag: block.settings.image.alt, 'custom__image' }}
            </noscript>
          {% else %}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
          {% endif %}
            </div>
         </a>
        {% when 'text' %}
          <div class="medium-up--text-{{ block.settings.align_text }}">
            {% if block.settings.title != blank %}
              <h4 class="h3">{{ block.settings.title | escape }}</h4>
            {% endif %}
            {% if block.settings.text != blank %}
              <div class="rte-setting rte1">{{ block.settings.text }}</div>
            {% endif %}
          </div>
        
      {% endcase %}
    </div>
  </div>

{% endfor %}
</div>

Answer 1

发现 answer.I 刚刚从 .reveal .hidden {} 中删除了高度和宽度。

悬停图像比原始图像大得多

Hover image is much larger than original image

html

css

hover

shopify