only img:hover is working, but after adding this to the CSS:
#user-profile #user-myModal .modal-body img:hover #user-profile #user-myModal .modal-body .change-pic i{
display: block;
}
it's not working. I changed the class and id names, tried everything,
but it still won't work.
What I want is for the user to hover over an image and have this class/id display: block. Also, can I use multiple classes/ids on hover or should I stick to only one?
CSS :
#user-profile #user-myModal .modal-body img{
border: 1px solid gray;
height: 160px;
width: 87%;
margin-left: 9%;
margin-top: 8%;
position: relative;
}
#user-profile #user-myModal .modal-body .change-pic i {
position: absolute;
top: 43%;
left: 39%;
color: black;
z-index: 999;
height: 50px;
width: 50px;
background: white;
border: 1px solid;
border-radius: 50px;
padding: 7% 0% 0% 8.4%;
display: none;
}
#user-profile #user-myModal .modal-body img:hover #user-profile #user-myModal .modal-body .change-pic i{
display: block;
}
HTML :
<section id="user-profile">
<div id="user-myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<ul class="nav nav-tabs list-inline">
<li role="presentation" class="active"><a id="profile-tab" href="#">Your Profile</a></li>
<li role="presentation"><a id="edit-profile-tab" href="#edit-profile">Edit Profile</a></li>
</ul>
</div>
<div class="modal-body">
<div class="row" id="user-profile-tab">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<img src="img/jagdish.jpg" class="img-responsive">
<div class="change-pic">
<i class="fas fa-upload"></i>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 details">
<h4>Mr. jagdish Panday</h4>
<h6><strong>Occupation :</strong> Web Developer</h6>
<h6><strong>Address :</strong> Kausaltar, Madhyapur Thimi, Nepal</h6>
<h6><strong>Phone :</strong> 9863696718</h6>
<h6><strong>Email :</strong> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c4c5d52585d4556557c5b5550125f5351">[email protected]</a></h6>
<ul>
<li class="facebook"><i class="fab fa-facebook"></i></li>
<li class="twitter"><i class="fab fa-twitter-square"></i></li>
<li class="instagram"><i class="fab fa-instagram"></i></li>
<li class="google"><i class="fab fa-google-plus-square"></i></li>
</ul>
</div>
</div>
<div class="edit-profile text-center" id="edit-profile" style="display:none;">
<form>
<input type="text" placeholder="Name"><br>
<input type="text" placeholder="Occupation"><br>
<input type="text" placeholder="Address"><br>
<input type="text" placeholder="Phone Number"><br>
<input type="text" placeholder="Email"><br>
<a class="btn btn-default">Save Changes</a>
</form>
</div>
</div>
</div>
</div>
</div>
</section>