我试图显示第二个图像和文本，当你悬停在Shopify的原始图像。现在，由于某种原因，当我悬停时，第二个图像会展开，并且比原始图像占用更多的空间(当两个图像大小相同时)。我正在附加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;
}
我如何确保在悬停时图像占用与原始图像完全相同的空间?任何帮助或指点都会很有帮助。谢谢你！
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>
找到答案了。我只是从.reveal .hidden {}移除了高度和宽度。