CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sonal Goyal
Sonal Goyal

Reputation: 25

hover effects on image like appears a button

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

Answers (2)

Milan and Friends
Milan and Friends

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

GautamD31
GautamD31

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

Related Questions