Jump to content

Show div or button on image hover

Recommended Posts

Posted (edited)
<div class='post_body'>
	<div class='post entry-content '>
		<span rel='lightbox'>
			<img class='bbc_img' src="http://mysite.com/1.jpg">
		<span rel='lightbox'>
			<img class='bbc_img' src="http://mysite.com/2.jpg">
		<span rel='lightbox'>
			<img class='bbc_img' src="http://mysite.com/3.jpg">

How to show div or button on image hover? Not for all... Only for image that hovered.

Show button on image: top-right

The image name can be a random.

Need for IPB 3.4.9

Edited by googIe

Share this post

Link to post
Share on other sites
titcrunch    283

with css and class :hover like

bbc_img:hover {



Share this post

Link to post
Share on other sites
JeffyterS    2

You can do it with CSS3 or JavaScript/jQuery.

CSS3 Mode:

.bbc_img:hover ~.button (use your class css of the button) { display: block; }

in the css of the button, use display:none.

jQuery mode:


  $("#ID_IMAGE OR CLASS CSS").hover(function(){




Note: use " # " for IDs and " .CLASSNAME " for classes; If you want to Hide and Show on Hover and hover off, use toggle() instead of show();

You can ready the jQuery Applications in http://api.jquery.com/

  • Upvote 1

Share this post

Link to post
Share on other sites
What do you think? Remember the human.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.