Pages content block hover customization

IlyaVishnyakov · November 14, 2016

Hi everyone, I'm struggling with "Info Hover" customization. What I want to do is a small tweak to how "Info Hover" works.

So for "Pages" and "Galleries" content blocks there is a feature called "Info Hover" which determines how visitors' mouse movements display or hide the title of the page or gallery. There are two options for "Info Hover": one makes the title appear when mouse hovers over it, another makes the title disappear when mouse hovers over it. What I want to do is the following: I want the title of page or gallery to be visible at all times, but the thumbnail to become darkened (or more transparent) when mouse hovers over it.

I successfully implemented the following CSS code:

.sm-user-ui .sm-tile-info .sm-tile-title {
color: #fff;
font-size: 44px;
font-weight: 100;
position: absolute;
bottom: 25px;
left: 0;
}

.sm-tiles-infohover-show .sm-tile-content .sm-tile-info:hover {
opacity: 0.75;
background-color: black;
}

.sm-tile-title {
color: #fff;
opacity: 1;
}

This CSS changes tile background from grey to black and darkens the thumbnail on mouse hover. It also changes font size and position of the title text. This code currently works only if "Info Hover" is in "Show" mode. This means that the title of the page or gallery is only visible when mouse hovers over it.

Is there anyway to make the title of the page or gallery visible at all times, but darken the thumbnail on mouse hover?

Hikin' Mike · November 14, 2016

This works on my testing gallery:

.sm-user-ui .sm-tiles-infohover-show .sm-tile-info {
    opacity: 1;
    }
    
.sm-user-ui .sm-tile-content .sm-image:hover {
    opacity: .6;
    }

Make sure the 'Info Hover' is set to "Show" mode.

IlyaVishnyakov · November 18, 2016

Hikin' Mike wrote: »
This works on my testing gallery:
.sm-user-ui .sm-tiles-infohover-show .sm-tile-info {
    opacity: 1;
    }
    
.sm-user-ui .sm-tile-content .sm-image:hover {
    opacity: .6;
    }    
Make sure the 'Info Hover' is set to "Show" mode.

Thank you, I decided to overhaul the design of the website entirely and use a different CSS now.

Pages content block hover customization

Comments