html - Hover image is much larger than original image

Question

I am trying to show a second image and text when you hover over an original image in Shopify. Now for some reason, when I hover, the second image expands and takes more space than the original (when both are the same size). I am attaching the CSS snippet.

The original container 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;}

hover 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;
}

How can I make sure that on hover the image is taking up exactly the same space as the original image? Any help or pointers will be helpful. Thank you!

P.S adding the html and liquid portion to this:

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

标签： htmlcsshovershopify

Answer 1

Found the answer.I just removed height and width from .reveal .hidden {}.