Rollover/Mouseover

  • Unknown's avatar
    willym01 · Member ·

    Sorry I had asked about this earlier but got sidetracked with work and daily requirements and the topic is now closed. In the past I had used a CSS code that I found on here to allow mouseover to change an image however it does not appear to work with the new theme I have chosen (the old theme has been retired). In the previous discussion Hallluke suggested that I publish a Test Page with the two images I wanted to work with on it. Which I have done: https://willyorwonthe.wordpress.com/test-page/

    Can anyone give me any idea how I can do this? Many thanks

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, can you let me know where you wish to have this image so that I can construct the proper CSS? It may be best if you insert the base image where you want it and then I’ll know exactly where you want it and be able to work out the CSS.

  • Unknown's avatar
    willym01 · Member ·

    Good morning and thank you for your offer of assistance.

    I’m not sure what you mean by base image but hopefully I’m following your instructions.

    The post I’m working on is in draft under: https://wordpress.com/post/willyorwonthe.wordpress.com/19656

    The image I want to when the post is first seen is: https://willyorwonthe.files.wordpress.com/2016/11/warehouse-1.jpg

    when the mouse is rolled over the image turns to: https://willyorwonthe.files.wordpress.com/2016/11/encaustic-close-up.jpg

    Then back to original. It is something I’ve always been able to do on Blogspot but have only achieved here once before from a CSS code that now appears to be out of date or non-functioning.

    Again not sure if this is all the info you need or not?

    Thanks

    Will

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @willym01, just wanted to let you know I’m working on this. Typically it is easier if the image is “linked”. On the CSS, if you have by chance changed themes, then keep in mind that CSS is theme specific, so what works on one theme will not necessarily work on another. Sometimes there are some similarities though.

  • Unknown's avatar
    thesacredpath · Member ·

    Hmmm, let’s link that image in that post to something. You can edit the image from within the post editor and choose to link it to the image itself. Then we can do the mouseover effect on the “a” (link) element.

  • Unknown's avatar
    willym01 · Member ·

    Internet is down here but will link as soon as it is up.

  • Unknown's avatar
    willym01 · Member ·

    Ciao

    Internet is back up and I’ve linked the warehouse1 image to itself.

  • Unknown's avatar
    siobhyb · Member ·

    Hi Willym,

    I hope you don’t mind me jumping in while Richard’s enjoying the US Thanksgiving. :)

    I was able to achieve the effect you’re after through a slightly different approach to what he was taking.

    First, I added some HTML to the post’s HTML editor:

    <div class="hover-effect"></div>

    Next, I added the following custom CSS:

    .hover-effect {
    background-image: url('https://willyorwonthe.files.wordpress.com/2016/11/warehouse-1.jpg');
    height: 500px;
    width: 400px;
    margin: 0 auto 1.75em;
}

.hover-effect:hover {
    background-image: url('https://willyorwonthe.files.wordpress.com/2016/11/encaustic-close-up.jpg');
}

    The first background-image in the above snippet should include the URL to the image you wish to display by default on your post. The second should include the URL to the image you wish to display on hover.

    You can also edit the values for height and width depending on the size of your image.

    Let me know if that works out for you!

  • Unknown's avatar
    willym01 · Member ·

    Good morning Siobhyb

    Thanks for working on this. It worked in this case and very well. I guess my concern is that it is a one-of solution at this point. When I had the blog up on blogspot I had several rollovers/hovers and once I found a work around had a few to update and may want to use it – sparingly – in future posts. I am assuming that I could add CSS using “.hover-effect:hover1” and onward with a numbering system???

  • Unknown's avatar
    siobhyb · Member ·

    Hi Willym,

    You could change the class name – hover-effect – to anything you’d like in order to replicate the effect.

    For example, the HTML would look as follows after changing hover-effect to warehouse-image:

    <div class="warehouse-image"></div>

    The corresponding custom CSS would then look as follows:

    .warehouse-image {
    background-image: url('https://willyorwonthe.files.wordpress.com/2016/11/warehouse-1.jpg');
    height: 500px;
    width: 400px;
    margin: 0 auto 1.75em;
}

.warehouse-image:hover {
    background-image: url('https://willyorwonthe.files.wordpress.com/2016/11/encaustic-close-up.jpg');
}

    Let me know if that’s clear. :)

  • Unknown's avatar
    willym01 · Member ·

    Ciao

    Yes very clear and thanks very much – just tried it on an old post that I had imported from WordPress and it now works. A bit complicated but I think once I’ve got the hang of it there shouldn’t be a problem. It may fill up the CSS code fairly quickly if I go back and redo previous posts LOL.

    Just to be a pain one further question – is there a way to then not to revert to the original image? I just want the mouseover to replace one image with the other. I.E. I wanted the encaustic to stay and not revert to the warehouse image?

  • Unknown's avatar
    siobhyb · Member ·

    Hi Willym,

    CSS transitions could be used to make the hover effect permanent:

    .warehouse-image {
    background-image: url('https://willyorwonthe.files.wordpress.com/2016/11/warehouse-1.jpg');
    height: 500px;
    width: 400px;
    margin: 0 auto 1.75em;
    transition:0s 180s;
}

.warehouse-image:hover {
    background-image: url('https://willyorwonthe.files.wordpress.com/2016/11/encaustic-close-up.jpg');
    transition: 0s;
}

    Please note that the CSS transition property is fairly new and may not work with some browsers. You can view a list of browsers that it will work with here.

  • Unknown's avatar
    willym01 · Member ·

    Many thanks once again – it doesn’t work with all browsers but enough that it will have the desired effect. Really appreciate your help.

  • The topic ‘Rollover/Mouseover’ is closed to new replies.