front-page changing background on hover

  • blablacat

    (@blablacat)


    9 years, 2 months ago

    Hi!
    I’ve looked around on the web and tried a couple of tutorials, but I can’t obtain what I’m looking for.
    For my front-page (front-page template created starting from the standard page, with name: front-page.php) I’d love the chance of a white background changing in an image background when the mouse is over a textlink. The textlink will be centered (in the middle of the white space of the page) and each link will be show a different image as background.
    What I’m looking for:
    – text not hover will be black, text hover will be white and readable upon the image;
    – background image will fill up all the page;
    – the header will be still visible;

    Anyone could help me? I’ve tried other solutions but without achieving a fullsize image, or with the image hiding the text.

    Thankyou so much!

    info:
    website link
    theme: Sketch (with child theme active)

Viewing 3 replies - 1 through 3 (of 3 total)
  • Chris Cook

    (@cccamuseme)

    9 years, 2 months ago

    You can use simple jQuery.

    $(‘a.class’).on(‘mousein’, function(){
$(‘#portfolio’).css(‘background-image’, ‘url(“other.jpg”)’);
});
$(‘a.class’).on(‘mouseout’, function(){, function(){
$(‘#portfolio’).css(‘background-image’, ‘url(“img2.jpg”)’);
});

    [Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

    • This reply was modified 9 years, 2 months ago by bdbrown.
    • This reply was modified 9 years, 2 months ago by bdbrown.
    Thread Starter blablacat

    (@blablacat)

    9 years, 2 months ago

    sorry, I’m not so prepared about coding. Could you please explain how to use it? I’ll put in front-page.php, but I don’t know how to style. I’m a bit confused about the portfolio, because my theme has a portfolio page yet… sorry 🙁

    Thread Starter blablacat

    (@blablacat)

    9 years, 2 months ago

    Allright, I’ve tried something playing with a snipped I found on fiddle… and it seems to work… maybe. Here working

    $("#first").hover(function () {
    $("body").css("background-image", 'url("http://static.bbc.co.uk/solarsystem/img/ic/640/collections/space_exploration/space_exploration_large.jpg")');
});

$("#second").hover(function () {
    $("body").css("background-image", 'url("http://i.telegraph.co.uk/multimedia/archive/02179/Milky-Way_2179177b.jpg")');
});

$("#third").hover(function () {
    $("body").css("background-image", 'url("http://www.thatsreallypossible.com/wp-content/uploads/2012/12/Space-Colonialisation.jpg")');

});

    BUT I don’t know how/where to put the code in my theme 🙁

    • This reply was modified 9 years, 2 months ago by blablacat.
Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘front-page changing background on hover’ is closed to new replies.