Input image with :hover text and opacity - css

Question

How can I make that the hover option allows me to see the image with opacity and the p tag inside not affected by opacity style? Please note that the img is inside an input tag and when I click it a bootsrap modal will appear with input form
.img_wrap:hover
#updateImg{ opacity: 0.7; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img_wrap">
<input type='image' id='updateImg' src='http://placehold.it/350x150'>
</input>
<span></span><p class="imgText">Click here to change your image</p>
</div>

Answer 1

You need to handle each children's opacity separately. Also, if you want them overlapped, you need one of them (the text in my example, positioned absolute and the parent relative).
I'm guessing the following example does what you want to achieve? If not, please state your request clearer.
.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 supposed to be used instead of a (submit) button. It's a shortcut for a button with a background image, that resizes itself to the image ratio. If you want to submit an image to the server using an <input>, you probably want to use <input type="file" />

Answer 2

here is what you want
.img_wrap{
display: inline-block;
position: relative;
}
.img_wrap:hover #updateImg{
opacity: 0.7;
position: relative;
}
.img_wrap:hover .imgText{
position:absolute;
top:0;
bottom: 0;
left: 0;
right:0;
}