Tagged: , , ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
  • #762990

    Is there a what to make the text content of a grid row cell change when the mouse hovers over it?


    Hey JPOsteen,
    You can many different ways, it depends on what you are trying to do. Here’s one example: http://fiddle.jshell.net/nikhilmangal/fcyL7Lfu/

    Best regards,


    Thanks Mike,

    Where would I put this code? Is it just a quick CSS?



    That code is also including some JS, which has to be added either on your header.php of the child theme or create a custom function that will place it. If you can not have a way to integrate it or do not know how, consider to hire a freelancer to help you integrate the function.

    Thank you



    So there’s no way to do it with CSS?



    You might find a way, if you consider to hire someone to help you with the task.
    Our support policy ends somewhere here, regarding such type of modifications we are afraid.

    Thank you for your understanding



    i’m trying to do something similar but that link from Mike no longer works. in any case, is the three cell grid shown on the site in the private area below possible to recreate using enfold elements only, or has to be done with some css? as shown, each cell is of equal size and its text changes as does its background when hovering, and when clicked you scroll down to an anchor.

    • This reply was modified 3 years, 5 months ago by s29ers.

    Thanks for the link to the element you would like to recreate in Enfold. Here is a screenshot (click to view gif) of the element before and on mouse-over (hover) so everyone can follow along.
    For this example, I recommend the Icon Grid element using the “flip box” option,
    I set up 3 Icon Grid items with the appropriate icons and text, and for the arrow below each icon I added this link in the Grid Item Sub-Title field: <a href="#true-next" title="" rel="nofollow"></a>
    and in the flip back content:
    Please note that the “scroll to next” arrow link above anchors to #true-next, please adjust to suit and then add a manual link to each icon box to the anchors you wish:
    I know that you asked not to use any css, but the “scroll to next” arrow link is white by default, so for this example I added this css to make the arrow your blue color, and I also applied the blue to your icons. If your icon box background is darker then a white arrow would be good, or you can use just a HTML arrow character instead of the animated “scroll to next” arrow and not use this css.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top #main .avia-icongrid-flipbox .scroll-down-link,#top .avia-icongrid-flipbox span.icongrid-char:before {
        color: #4691a9 !important;
    #top .avia-icongrid-flipbox h4.av_icongrid_title {
    	font-size: 32px !important;
    #top .main_color a.avia-icongrid-wrapper {
    color: transparent !important;

    Here is the final result (click to view gif):

    Best regards,


    HI Mike, thanks very much for the quick reply and solution; much appreciated. I will use that!

    For another area, I want to use the hover effect rather than the flip box. Is that possible within Enfold? Otherwise, how to recreate with CSS or other method? I found this CSS code file http://imagehover.io/ which should do the job, but couldn’t get it to work. I added the minified CSS file to a page using a <style> tag as explained in the Enfold help using a code block. But when I use the CSS to create a hover element on the page, like the examples, it doesn’t seem to work and I couldn’t figure out what’s wrong. Nothing gets displayed except a small 1cm box in which hover works, and when I open the CSS I used, the lines aren’t there anymore! Perhaps you could see when you have a moment? I gave you credentials and links in the section and details/code below. Thanks again and regards


    Hi again Mike

    I tried the icon grid flip box solution and had the following issues

    a) the flip side is quite narrow, not sure how you had them stay square – is there a way to i) make the icon grid boxes smaller, and keep them square regardless of flip content so I can reduce that as need to keep the shape? Could also be that your content area is browser width and mine is not? Not sure how to fix that.
    b) on mobile screens, the front icon/fonts get smaller but the row switches to 2 across instead of three and then to one across and grid stacks vertically but very widely spaced one after another. The flip size is much bigger than the front and full width on mobile! How to keep the size constant, square, smaller as the front, and reduce the vertical space between them?



    On your /test-codeblock/ page, I first un-commented your functions.php code to load the imagehover.min.css so it would load,

    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/css/imagehover.min.css',

    it is better than the “code block” css you added, I also removed that.
    I also adjusted your image code to show the image:

    <figure class="imghvr-fade">
        <img src="https://your-domain.com/wp-content/uploads/2020/04/coverage-540x300-1-300x167.jpg">
            This is the hover content that I have added
        <a href="https://your-domain.com/wp-content/uploads/2020/04/coverage-540x300-1-300x167.jpg"></a></figure>

    The issue was that your img src was empty, now it contains the link to your image and the hover works.

    On the same page, your icon grid was inside of a color section which restricted it’s width, I moved it out of the color section and now they are square.

    Best regards,


    Hi Mike. Brilliant. Thank you. I’ll try it out and let you know when done. Since the icon grid becomes a rectangle on smaller screens, rather than a smaller square, even setting smaller fonts on smaller devices in the icon grid styling, is there any way to keep the grid square regardless of screen size? Thanks again

    • This reply was modified 3 years, 5 months ago by s29ers.

    To have your icon grids to have the same height as width, Try adding this code to the end of your functions.php file in Appearance > Editor:

    function equal_height_icon_grid(){
    $(document).ready(function() {
    	$(window).on('resize', function() {
            $('.article-icon-entry').height( $('.article-icon-entry').width() );
    add_action('wp_footer', 'equal_height_icon_grid');

    Then clear your browser cache and check.

    Best regards,


    That’s perfect Mike, thanks. Couple of last things:

    a) there is no scaling of the fonts for smaller sizes as the grid is sized although now the box is sized but square. Could I apply a media construct to scale the headings and text for each of them as needed and what would that CSS be?

    b) On the flip side, the link works only when exactly over the arrow/chevron. I think it should also work when hovering at any point as otherwise, we’ seen people click away, nothing happens and leave, as they fail to always realise they need to be on the chevron. Can you help with that?

    Thanks and regards


    a) you can use media queries to size the fonts, like this:

    @media only screen and (max-width: 375px) { 
    #main a > h3.av_icongrid_title.icongrid_title {
    	    font-size: 36px !important;

    b) please see this screenshot that shows adding the link to the advanced tab, then the whole cell is a link.

    Best regards,


    Perfect. Thanks for all your help in this, much appreciated.


    Hi s29ers,

    Great, I’m glad that Mike could help you out.

    Best regards,

Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Change Content When Hovering Over a Grid Cell’ is closed to new replies.