How To Create An Image That Changes On Mouse Hover Over In WordPress Sidebar Widget – Video
This video demonstrates an easy way of how to create banner in the sidebar in WordPress that changes when you pass or place your mouse over it. Using this type technique will increase the effectiveness of banners on your website and increase the number of click throughs.
Below is the code that I use in the side bar widget in WordPress for an image to change on mouse over hover:-
<style>
.hover-class {
height: 543px;
width: 285px;
display: block;
border: none;
background: url(“http://www.workwithneilball.com/wp-content/uploads/2013/05/homelessman-free-video-banner.png”) no-repeat;
margin-top: 0px;
margin-left: 0px;
}.hover-class:hover {
background-position: right;
}</style>
<a href=”http://lifestyleselect.net/click/go.php?c=empowerbloglssban2&s=workwithneilball” target=”_blank” class=”hover-class” href=”http://www.lifestyleselect.net/wp-content/uploads/2013/01/free_video.png”> </a>
I Get Paid To Write Posts Like This – Discover How You Can Do The Same
|
| Thank you for visiting my blog. I get paid to write about anything including telling people about new products and also reviewing products. If you would like to know how to do this then Click Here Some people that do this and are making $5000 a month, some are making $10,000 part time and full time. There are even some people making over $100,000 a month with a blog like this. If you would like to join my team then Click Here nowWhen you click the link you will be taken to page where you enter your email address and then you will see a FREE VIDEO that explains how you can do it too. The video that explains how to do it is FREE so Click Here |
|
|
How To Create An Image That Changes On Mouse Hover Over In WordPress Sidebar
*****************************************************
Video Transcript
Hello its Neil Ball here from work with Neil Ball and today in this video I’m going to demonstrate how to create an image or banner that when you hover the mouse over it changes in some ways for example if you take this banner on the right hand side of my website as I hover over the mouse it causes the image to change like that.
Now it is very straight forward to do, this is actually one image, its actually made up of an image like this, which is the two image side by side so you’ve got the image on the left, which is the image which is shown before the mouse hovers over, the right hand image is then shown. There is a little bit of code you need to make that happen, but it is very straight forward, so, you start off with the left and the right image. They both have to be exactly the same size. And what you do then is you put them together on a single image. With a space down the middle of something like ten. That is approximately what I have done, I’ve got so that they are not overlapping and there is a distinct difference between the two of them. You could probably get away with a smaller gap than that but I usually always work with ten so if I now create another image now, it’s a very straightforward process, you are going to be doing, 580 and the height on this was 543 so I will just create a new image like that and then it is a question of them positioning the images to the left and the right, once you have created the larger sized image so again I can duplicate that and send it to a new image so here we have it, we have got the left image and the right image, so this one is the right image, so we are just going to slide that over to the right, like that until it is perfectly lined up.
And then the left image and this one we are just going to position to the left. I usually save it as PNG so that is fairly straightforward and the next thing you are going to do is to go into WordPress and media and add the image to the image library you are just going to upload it and you are going to get URL I will just show you now as I have just done this fairly recently on here. So here it is and you are going to grab this URL here which is the URL of the image, and then there is some code which I shall absolutely supply to you on my website if you come to my website which is http://www.WorkWithNeilBall.com as you can see at the top. I’ll actually put a link at the side of this video on You Tube or something click the link, I’ll put the code on my webpage so you can grab it off the page and copy and paste it onto your website and put your link in there to get it working.
So, if we now go into widgets which is in appearance. We go right side bar, what you need to do is, you need to drag a text box across over into the side bar widget that is going to be displayed. You need to be put a text widget into the side bar are and then what you will do is, you will then copy this code which I am showing you now on the screen into that box. Now a couple of things about this, you now set on here this first part of it. You set the size of the image that you want to display because what actually happens here is that as you hover the mouse over the image, it goes from showing the left hand side of the image to the right hand side of the image. So at any time you are only going to see the width of the image. The two images that I am using there on the single image are 285 wide. So the left hand image is 285 and the right hand image is 285 and the height is 483 so these settings here need to be the size you want to display so then what you are going to do here is this background setting here is where you put the URL of the image that you have uploaded which is the big image which I have just showed you there, that is the URL which we have just taken there and the only other thing you need to do is, I have put some extra code on here, for when you are clicking it to when you are clicking the image, the image, you will then be taken to another page.
So what I will do is, I will put all of that on my websites, so that you can easily copy and paste it rather than trying to copy it off this video prone to mistakes and once you’ve done that and you save it then you should get an image like this. Which is really effective and really simple. There is nothing fancy about it at all and here are a number of people out that as I said earlier who are making this incredibly complicated when it isn’t that is how you make an image that changes as a hover over as you did like that. Which is a great way of getting peoples attention that navigate round your website.
So I am Neil Ball from work with Neil Ball, if you need any other hints and tricks have a look at my website which is http://www.WorkWithNeilBall.com and I will speak to you again.
Thank you. Goodbye
mouse hover over image
mouse rollover image
roll over images
image rollover
rollover image
mouseover in css
css on mouseover
html on mouseover
on hover effects
a hover effects
a rollover css
on rollover css
css rollover
css on rollover
images rollover
hover pictures
imagehover
image rollovers
hover css effect
mouse rollover
rollover mouse
rollovers css
roll over mouse
hover image effect
hover effect image
mouseover in html on image
mouseover on image in html
rollover image in html
rollover html image
image effect in css
How To Create An Image That Changes On Mouse Hover Over In WordPress Sidebar Widget