Reputation: 25
This is my html code:
<div class="wrapper">
<a target="_blank" href="klematis_big.htm">
<img data-src="holder.js/180x180" style="height:20%;width:100%;float:left;"
src="../goyal/profile-pic.jpg" alt="Klematis">
</a><p class="text">gjhgkuhgfkuyfrjytdcj</p>
</div>
css:
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
This is my profile picture of my page. when i hover on image it shows a button and some text with opacity. like edit profile picture etc you can use jQuery code.
Demo Here
Upvotes: 0
Views: 2998
Reputation: 5610
You can also achieve that with opacity and CSS3 Transitions, here's a Fiddle
HTML
<div class="wrapper">
<a target="_blank" href="klematis_big.htm">
<img data-src="holder.js/180x180" style="height:20%;width:100%;float:left;"
src="../goyal/profile-pic.jpg" alt="Klematis"/>
</a>
<p class="text">Text Text Text ...</p>
</div>
CSS
.wrapper .text {
position:relative;
bottom:30px;
left:10px;
opacity:0;
transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-webkit-transition: opacity 0.3s linear;
}
.wrapper:hover .text {
opacity:1;
}
Upvotes: 0
Reputation: 28773
Replace
#wrapper .text {
with
.wrapper .text {
And
#wrapper:hover .text {
with
.wrapper:hover .text {
wrapper
is an class
not an id
.id
will represented with #
and class will represented with .
Upvotes: 1