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