MouseOver change image in FeatureBox

  • Author
  • #3313


    This is my site (still under construction):

    Question 1 – Presentation Page, Feature Box: is there any way to swap images on mouse over ?

    (I could add the usual ‘onmouse’ istruction in Theme-FrontPage.php’s “Column” section…but then,  should I add a new image, I would have to re-edit the .php file each time)

    Question 2 – Why do I get that ‘flashy‘ effect when I actually move the mouse over the Feature Box’s image? (I did not touch the above mentioned .php File)

    Thanks…and congratulations for your so flexible Theme!…Should you come in the future to Rome…You’ll get a full Fettuccine’s plate; much better than just a coffee! 🙂




    Cryout Creations mastermind

    Hi Luigi!

    Congrats on your site. Looks great.

    1. Editing the php file is the only way to achieve that at the moment. Done properly you wouldn’t have to change the code every time you change a photo if you’d keep the same photo names. But it would involve a little bit of work since the whole thing is in a ‘for’ loop.

    2. That flashy effect is from the theme. If you want to remove that go to the same /includes/theme-frontpage.php file and remove this part:

    jQuery('#front-columns > div img').hover( function() {
    .animate({opacity: 0.5}, 100)
    .animate({opacity: 1}, 100) ;
    }, function() {jQuery(this).stop();} )

    Good luck!

    Before posting consider reading our short theme debugging instructions.
    Please read the FAQs: MantraNirvanaParabolaTempera
    Tutorials: custom menustranslating themeinstalling themecategory page with introdisabling comments Wordpress: child themescategories/posts
    Before making any modifications to your theme we strongly recommend using Child Themes.

    Hi Kay,

    Thanks for your reply.

    I’ll work on that .php code a bit…good idea, about the same fixed name for the photos; I’ll just save the new photos with the same prefixed name.




    Hi Kay!

    I tested the mouse-over effect by modifying the original files: defaults.php and theme-frontpage.php.

    They worked fine.

    After that, I made a fresh install of Mantra (so to get back to the original files).

    Then, I’ve created a Child Theme and activated it.

    The style.css goes like this:

    Theme Name:        mantra Child
    Theme URI:
    Description:        Child theme for the Mantra theme
    Author:                 LZ
    Author URI:
    Template:           mantra
    Version:            0.1.0

    @import url(“../mantra/style.css”);

    .site-title a {
    color: #009900;

    require_once( get_stylesheet_directory(). ‘/defaults.php’ );
    require_once( get_stylesheet_directory(). ‘/theme-frontpage.php’ );

    The modified files are: defaults.php and theme-frontpage.php.

    I now have placed those two modified files in the Child Theme (inside two Child Theme’s directories, ‘admin’ and ‘includes’), but it seems they’re doing  just nothing…

    Since it’s the first time I use a Child Theme, can you help me in getting it to work?




    Cryout Creations mastermind

    You’re on the right track… but not quite 🙂
    Don’t include php files in the CSS. “require…” is a php function, it won’t do anything in a CSS file.

    Mantra’s files are not automatically replaced with child theme files if they get detected.
    You need to create a functions.php file in your child theme and include your custom child theme files (copy Mantra’s functions.php file and edit it to include your own files). Keep in mind your directory structure.

    Also, not all Mantra functions are over-ridable easily with child themes. Some need to be unhooked and their child theme copies hooked in their place.
    But at least the front-page function does not need this.

    If you like our creations, help us share by rating them on
    Please check the available documentation and search the forums before starting a topic.

    Hi Zed,

    thanks for your reply.

    Ok, now I have a theme-function.php which includes the two files: defaults.php and theme-frontpage.php.

     * CHILD THEME Functions file
    * Includes all necessary files…so far
    * @package mantra

    //Loading include files

    require_once( get_stylesheet_directory(). ‘/admin/defaults.php’ ); // Load AATR Var definitions
    require_once( get_stylesheet_directory(). ‘/includes/theme-frontpage.php’ ); //AATR Frontpage generation


    The mouseover’s code – contained in the mantra child theme-frontpage.php – is executed.

    The code works with two URI, defined in the mantra array (inside the mantra child’s, as this:

    // THESE are AfterAllthatsRome Images for OnMouseover effect on 3 Features Boxes.

    “mantra_MouseOver_ColumnImage1_OUT” => get_stylesheet_directory_uri().”/images/AfterAll_FeatBox_Images/AATR_1_OUT.jpg”,
    “mantra_MouseOver_ColumnImage1_IN” => get_stylesheet_directory_uri().”/images/AfterAll_FeatBox_Images/AATR_1_IN.jpg”,
    “mantra_MouseOver_ColumnImage2_OUT” => get_stylesheet_directory_uri().”/images/AfterAll_FeatBox_Images/AATR_2_OUT.jpg”,
    “mantra_MouseOver_ColumnImage2_IN” => get_stylesheet_directory_uri().”/images/AfterAll_FeatBox_Images/AATR_2_IN.jpg”,
    “mantra_MouseOver_ColumnImage3_OUT” => get_stylesheet_directory_uri().”/images/AfterAll_FeatBox_Images/AATR_3_OUT.jpg”,
    “mantra_MouseOver_ColumnImage3_IN” => get_stylesheet_directory_uri().”/images/AfterAll_FeatBox_Images/AATR_3_IN.jpg”,

    // END of AfterAllthatsRome Images for OnMouseover effect.

    If I put the array  addition inside the original mantra defaults.php, everything it works fine: but if I add those array additions inside the mantra child theme defaults.php – which I have also included in the new functions.php – nothing happens.

    I do apologize, being completely new to child-them’s stuff…any hint?



Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘MouseOver change image in FeatureBox’ is closed to new replies.