Stop text disappearing on gallery thumbnail rollover?

scotthunterscotthunter Registered Users Posts: 45 Big grins
Hello,

I have a photography website here:

www.scotthunterphotography.com

When I hover the mouse over the gallery thumbnails, I would like the text not to disappear. I would also like the text to be in capital letters.

At the moment, I have a CSS placeholder on the home page with the following code:

.sm-tiles-grid ul li a p {
font-size: 180%!important;
padding-left: 0!important;
padding-right: 0!important;
color: white! important;
font-weight: thin!important;
}

Ideally, I would like something similar to this, with a semi-transparent bar across the middle, which changes colour on rollover:

http://www.alexnail.com/gallery/

Hope someone can help. Thanks in advance.

Scott

Comments

  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited April 20, 2017

    There is a setting, Info Hover, that causes the text to disappear on hover.

    To change the setting:

    Open a folder on your site containing galleries.
    Customize... Content and Design
    Hover over the content block containing the galleries
    Click the wrench icon

    Select the gallery style you are using.

    Change the Info Hover property as desired.

  • scotthunterscotthunter Registered Users Posts: 45 Big grins
    Hi Denise,

    Thanks, but not quite what I was looking for. Is it possible to have a rectangular semi transparent box in the centre of the thumbnail containing the text? I don't want the text to appear or disappear completely.

    Scott
  • byangbyang Registered Users Posts: 1 Beginner grinner
    edited April 20, 2017
    Hey Scott,

    This should get you started. You'll want to put this on the page where your galleries content block is displayed, but avoid putting it in an actual gallery, unless that's what you really want. Text alignment can be set in the settings for the content block itself. You will also want to change the content block setting such that the info overlay doesn't disappear on hover. Obviously, tweak height, color, and transition values to fit your taste.

    .sm-tile-info {
    bottom: initial;
    height: 64px;
    text-transform: uppercase;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.4s ease-in-out;
    }

    .sm-tile-info p {
    transition: color 0.4s ease-in-out;
    }

    .sm-tile-content:hover .sm-tile-info {
    background-color: rgba(255, 255, 255, 0.6);
    }

    .sm-tile-content:hover .sm-tile-info p {
    color: #000;
    }

    ~Good luck
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited April 20, 2017

    @scotthunter said:
    Hi Denise,



    Thanks, but not quite what I was looking for. Is it possible to have a rectangular semi transparent box in the centre of the thumbnail containing the text? I don't want the text to appear or disappear completely.



    Scott

    Remove the code you posted above and use this instead:

    .sm-user-ui .sm-tile-info .sm-tile-title {
        font-size: 180%;
        min-height: auto;
        padding: 5px 0;
        color: white;
        background: rgba( 0, 0, 0, .5 );
        }
    
        .sm-user-ui .sm-tile-info .sm-tile-title:hover {
            color: black;
            background: rgba( 255, 255, 255, .5 );
            }
    
    .sm-user-ui .sm-tiles-infohover-hide .sm-tile-content .sm-tile-info,    
    .sm-user-ui .sm-tiles-infohover-hide .sm-tile-content:hover .sm-tile-info {
        opacity: 1;
        }
    
  • scotthunterscotthunter Registered Users Posts: 45 Big grins
    Hi,

    Thanks for the code. I think I am almost there.

    http://www.scotthunterphotography.com

    I would like to increase the size of the text and I would like the background photo to turn to 100% opacity on rollover. I tried to change the size of the text in the code but it caused the text to be misaligned.

    Thanks!

    Scott

    Current CSS is here:

    .sm-user-ui .sm-tile-info .sm-tile-title {
    font-size: 120%;
    min-height: auto;
    padding: 40px 0;
    color: white;
    background: rgba( 0, 0, 0, .5 );
    }

    .sm-user-ui .sm-tile-info .sm-tile-title:hover {
    color: black;
    background: rgba( 255, 255, 255, .5 );
    }

    .sm-user-ui .sm-tiles-infohover-hide .sm-tile-content .sm-tile-info,
    .sm-user-ui .sm-tiles-infohover-hide .sm-tile-content:hover .sm-tile-info {
    opacity: 1;
    }
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited April 23, 2017

    @scotthunter said:
    Hi,
    Thanks for the code. I think I am almost there.
    http://www.scotthunterphotography.com
    I would like to increase the size of the text and I would like the background photo to turn to 100% opacity on rollover. I tried to change the size of the text in the code but it caused the text to be misaligned.
    Thanks!
    Scott

    Your original font-size was 180%, so based on that you need to add this:

    .sm-user-ui .sm-tiles-info-cover .sm-tile-title {
        margin-bottom: -2.25em;
        }
    

    If you decided to change the font size, you need to adjust the new code above to suit.

    It's getting late and I'm having a tough time with your second question, so I'm going to have to look at it when my eyes/brain are fresh.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited April 24, 2017

    EDIT:

    Replace the code I posted above and use this...

    .sm-user-ui .sm-tile-content .sm-tile-info .sm-tile-title {
        font-size: 180%;
        min-height: auto;
        padding: 40px 0;
        color: white;
        background: rgba( 0, 0, 0, .5 );
        }
    
    .sm-user-ui .sm-tile-content:hover .sm-tile-info .sm-tile-title {
        color: black;
        background: rgba( 255, 255, 255, .5 );
        }
    
    .sm-user-ui .sm-tiles-info-cover .sm-tile-title {
        margin-bottom: -2.25em;
        }   
    
    .sm-user-ui .sm-tiles-infohover-hide .sm-tile-content:hover .sm-tile-info {
        opacity: 1;
        }   
    
    .sm-user-ui .sm-tile-content:hover > .sm-tile-info {
        background: rgba( 0, 0, 0, 0 );
        }           
    
  • MikeWMikeW Registered Users Posts: 5 Big grins
    edited September 26, 2021
    Hikin' Mike, Thanks for posting the class names (selectors) needed to alter the gallery titles. The CSS worked for me, although I decided not to use it.
Sign In or Register to comment.