To manage the opacity of each child element individually, it is necessary to handle them separately. If you want these elements to overlap, one of them (the text in this example) needs to be positioned absolute, and its parent should be positioned as relative.
Does the following example demonstrate what you are trying to accomplish? If not, please provide clearer instructions.
.img_wrap {
position: relative;
display: inline-block;
}
.img_wrap input[type="image"]{
opacity: 1;
display: block;
transition: opacity .3s cubic-bezier(.4,0,.2,1)
}
.img_wrap:hover input[type="image"] {
opacity: .3;
}
.img_wrap .imgText {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
opacity: 0;
transition: opacity .3s cubic-bezier(.4,0,.2,1)
}
.img_wrap:hover .imgText {
opacity: 1;
pointer-events: none;
}
<div class="img_wrap">
<input type='image' id='updateImg' src='http://placehold.it/350x150' />
<div class="imgText">Click here to change your image</div>
</div>
Notes:
<input> is a self-closing tag, so <input></input> is invalid.<input type="image"> is meant to replace a submit button with an image. It acts like a button but resizes itself to fit the image ratio. To upload an image to the server using <input>, consider using <input type="file" />