Stop text disappearing on gallery thumbnail rollover?

scotthunter

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

denisegoldberg

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.

scotthunter

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

byang

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' Mike

@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;
    }

scotthunter

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' Mike

@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' Mike

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 );
    }           

MikeW

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.