Here is something you could try in order to change the opacity on hover.
Restructure HTML wrapper around the image and text. So when you hover over the wrapper you can change the opacity.
<div class=“Leaders_module”>
{% for item in module.leaders_module_group_fields %}
<div class=“Leaders_module_container col_2”>
<div class=“img_box”> //image or any image class
<img src=“{{ item.leaders_module_image.src }}” class=“leader_image” alt=“{{ item.leaders_module_image.alt }}” {{ sizeAttrs }}>
</div>
<div class=“Leaders_module_text_container”>
<span class=“Leaders_module_text”>
<h3 class=“leader_name”>
{% inline_text field=“leaders_module_name” value=“{{ item.leaders_module_name }}” %}
</h3>
<h4 class=“leader_title”>
{% inline_text field=“leader_title” value=“{{ item.leader_title }}” %}
</h4>
</span>
</div>
</div>
{% endfor %}
</div>
Add the hover effect to the repeated item wrapper
.Leaders_module_container:hover .Leaders_module_text{
opacity:0;
}
Jacob Lett
Freelance HubSpot CMS Developer & Web Designer
Located in Michigan, USA