How do I output a button and a text when I hover on an image? Do I need to use JQuery?

Question

I'm working on my wordpress website right now, and there's one section where I have to create a gallery where the pictures would show some text and a button under the text when you over on the image. I'm trying to use a:hover but I can only make some changes. How do I show a button when you hover on the image? Please any help would be appreciated. Thanks a bunch

Answer 1

You could do something like:

HTML:

<div id="wrapper">
   <img src="thing.jpg">
   <button>Blah</button>
</div>

CSS:

#wrapper button { display: none; }
#wrapper:hover button { display: block; }

I'll leave you to handle the positioning.

Answer 2

Here's a quick example for you. You probably need to modify it to fill your needs.

Here's a fiddle: http://jsfiddle.net/829mL4z1/1/

HTML markup

 <div class="holder">
    <img alt="your-alt" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png"/>
    <div class="info">
       My text<br/>
       <input type="button" value="Button"/>
    </div>
 </div>

jQuery

$(document).ready(function(){
   $('.holder').on('mouseenter',function(){
      $(this).find('.info').fadeIn();
      });

   $('.holder').on('mouseleave',function(){
      $('.info').fadeOut();
      });
  });

CSS

.holder{
  position: relative;
  border: 1px solid #000000;
  width: 100px;
  }

.info{
  position: absolute;
  display: none;
  background: rgba(255,255,255,0.8);
  color: #000000;
  text-align: center;
  bottom: 0;
  z-index: 100;
  width: 100%;
  }

img{
 width: 100px;
 }

Answer 3

For all events in a web page, generally we prefer scripting languages like Javascript and Jquery . One simple example using jQuery is depicted in the following link. You can see all three sections: HTML, CSS, Javascript and the Output simultaneously here:

Example