module css does not working

[abdur]

can anyone tell me what is wrong in this code.

i am trying to add a simple css on a repeatable group module. css is when I hover on a image the text changes opacity. but the problem is no matter what I do the opacity changing css wont work if I select a img tag or the class of the image tag. but if I change the tag to anything else like 'body , h3' or other class (except the image class or tag) the css works perfectly. 

<div class="Leaders_module">
<div class="Leaders_module_container col_2">
{% for item in module.leaders_module_group_fields %}
<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>

{% endfor %}
</div>
</div>

css

.Leaders_module_container {

}
.leader_image {
position:relative;
display:inline-block;
}
img {
transition: .5s ease-in-out all;
z-index:1
}
.img_box{
z-index:2;}
.Leaders_module_text {
color:red;
font-weight:600;
font-size:1.25em;
position: absolute;
top:0;
left:0;
opacity:1;
margin: auto;
z-index:100;
}
.Leaders_module_text_container{
width 100%;
}
.Leaders_module_text {
text-align:center;
transition: .5s ease-in-out all;
}

.leader_image:hover{

}
// this css does not work with image
.img_box:hover .Leaders_module_text{
opacity:0;
}

[Jake_Lett · Accepted solution]

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

Get a free estimate now ›

---

[abdur]

Thank u very much Jacob that helped a lot. it was really frustrating.