I'm using Bootstrap 3
and jQuery 1.9.1
to make a website where profile picture is shown in a <li>
tag. I want to show the link of "Update Image" when I'm hovering over the image. So far I've managed to fade the image on hovering but I'm unable to show a link or text on hovering over image. Here are my codes,
JQUERY
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
},
function () {
$(this).fadeTo(200, 1);
});
});
CSS
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
HTML
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="myimage.png" alt="profile_pic" />
</li>
</ul>
</div>
</div>
I've searched other sources but none of them works since it'll bug my own css styles. How can I show a link at the middle of the image on hovering? Need this help badly! Thanks.
Hope, if you want to do it without Jquery - even though if you want to manage it using jquery, it can also be done.. not a big issue
.img-profile { margin-top: 10px; width: 200px; /* if image is bigger it will adjust according to parent width */ height: 250px; display: inline-block; } .img-wrap { display: inline-block; position: relative; } .img-wrap:hover .img-profile { opacity: 0.5; } .img-wrap .hover-div { display: none; position: absolute; text-align: center; top: 50%; left: 0; right: 0; margin-top: -10px; z-index: 10; /* width of image container */ } .img-wrap:hover .hover-div { display: inline-block; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="navbar-default sidebar" role="navigation"> <div class="sidebar-nav navbar-collapse"> <ul class="nav" id="side-menu"> <li class="img-wrap"> <img class="img-responsive img-rounded img-profile center-block" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="profile_pic" /> <div class="hover-div"><a href="#">Update Image</a> </div> </li> </ul> </div> </div>
Yoy should try this. that is exactly you want.
$(function () { $(".img-profile").hover( function () { $(this).fadeTo(200, 0.45); $(this).closest("li").find("a").show(); }, function () { $(this).fadeTo(200, 1); $(this).closest("li").find("a").hide(); }); })
.img-profile { margin-top: 10px; width: 200px; height: 250px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="navbar-default sidebar" role="navigation"> <div class="sidebar-nav navbar-collapse"> <ul class="nav" id="side-menu"> <li> <img class="img-responsive img-rounded img-profile" src="https://i.stack.imgur.com/TwJmm.gif?s=328&g=1" alt="profile_pic" /><a href="https://www.google.com" style="display:none">Link that you want</a> </li> </ul> </div> </div>
you can achieve all that using css alone.
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="myimage.png" alt="profile_pic" />
<p class="text">change profile picture</p>
</li>
</ul>
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
opacity: 1.0;
filter:alpha(opacity=100);
}
.text {
display: none;
}
img-profile:hover {
opacity: 0.45;
filter:alpha(opacity=45);
}
img-profile:hover + .text {
display: block;
}
check this fiddle
HTML
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Colossoma_macropomum_01.jpg/800px-Colossoma_macropomum_01.jpg" alt="profile_pic" />
<a href="" id="update">Update Image</a>
</li>
</ul>
</div>
</div>
CSS
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
#side-menu li a{
display:none;
}
#side-menu li:hover a#update{
display:block;
}
JS
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
},
function () {
$(this).fadeTo(200, 1);
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.