J'utilise jQuery CSS html J'ai recherché d'autres sources mais aucune d'entre elles ne fonctionne car elle va boguer mes propres styles CSS. Comment puis-je montrer un lien au milieu de l'image sur le planant? Besoin de cette aide mal! Merci. bootstrap 3 et jQuery 1.9.1 Pour créer un site Web où la photo de profil est affichée dans un
4 Réponses :
Yoy devrait essayer ceci. C'est exactement que vous voulez.
p>
<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>Merci, comme je l'ai dit, le lien doit être au milieu de l'image en planant.
Désolé man, mais je n'ai pas assez de connaissances pour CSS, mais sur Hover, le lien est affiché.
Vous devriez plonger CSS pour balise qui affichent au centre
Il suffit d'utiliser son code et de faire la photo de profil l'arrière-plan de la balise puis centrez le texte vous-même.
Vous pouvez réaliser tout cela utilisant CSS seul.
.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;
}
espoir, si vous voulez le faire sans jQuery - même si vous voulez le gérer à l'aide de JQuery, cela peut également être fait .. pas un gros problème
p>
<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>Celui-ci est presque ok. C'est juste pas réactif. La position de liaison change en fonction de la taille du périphérique. Avez-vous des chances que vous puissiez rendre cela répondant à tous les appareils?
Vous devrez ajuster la largeur parent-div, de sorte qu'elle puisse être réactive et vous pouvez même la gérer à l'aide de requêtes multimédias.
html CSS
Où voulez-vous afficher le lien?
Vous pouvez le faire uniquement avec CSS, ou vous voulez que cela soit fait avec jQuery?
Quelque chose fonctionne pour moi. Mais je suggère de jQuery puisque ma conception est réactive et que la position d'image change en fonction de la taille de l'écran du périphérique.