hover/overlay items styles

[mgma]

Hi guys-

can you direct me to where I can edit the styles for the overlays on portfolio thumbnails? Icon, title, exerpt… I cannot find those styles anywhere.

Thanks!

[David Martin – Support]

Hi,

What are you trying to do exactly?

The styles are dynamically generated for some of it, such as overlay colors:

Overlay:

figure.animated-overlay figcaption {
    background: -webkit-gradient(linear,left top,left bottom,color-stop(25%,rgba(126,206,213,0.60)),to(rgba(126,206,213,1.0)));
    background: -webkit-linear-gradient(top,rgba(126,206,213,0.60) 25%,rgba(126,206,213,1.0) 100%);
    background: linear-gradient(to bottom,rgba(126,206,213,0.60) 25%,rgba(126,206,213,1.0) 100%);
}

Title:

figcaption .thumb-info h4 {
    margin-top: 0;
    margin-bottom: 5px;
    transform: translate(0,20px);
}

Portfolio Tag:

figcaption .thumb-info h5 {
    margin-bottom: 0;
    margin-top: 4px;
    transform: translate(0,30px);
}

Thanks.

[mgma]

Thanks… but I’m trying to control these areas.

The “figcaption .thumb-info h4” style doesn’t allow me to even change font size. Using this doesn;t change enything, for instance…

figcaption .thumb-info h4 {
margin-top: 0;
margin-bottom: 5px;
font-size: 44px!important;
transform: translate(0,20px);
}

Also these areas are very large. I’d like them to be much shorter. How can I control this? I don;t see any padding anywhere that would be dictating this. These are 458px deep, for instance, even though there is almost no copy (see the row of three right under the hero)…

http://bigidea.pro/ce/home-header/

How can I change the size of the text, and reduce vertical padding, etc. so these are much shorter?

Thanks David!

[mgma]

I’m trying to change tyo something like the attached. Just can’t get it…

Thank you for your help…

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

The CSS is not working as you are using a different portfolio display. Please supply the portfolio URL you are working on.

To recreate something like the screenshot you would want to hire a developer as it is more than a small modification.

[mgma]

These are not portfolios, they are Icon boxes. Wow, really? All I want to do is remove some vertical space… so the boxes are shorter. There is no easy way to control this?

Thanks

[David Martin – Support]

In your first post you specifically ask “where I can edit the styles for the overlays on portfolio thumbnails”. That would be why I am asking you about it and started providing you with the CSS for those…

To change the height of the icon boxes, you can test this custom CSS to override the Page Builder styles:

.spb_icon_box_grid .spb_icon_box {
    min-height: 200px;
}

Ref: http://www.w3schools.com/cssref/pr_dim_min-height.asp

[mgma]

Thanks David. NO change though. I cannot seem to shorten those boxes no matter what I do…

[David Martin – Support]

Please add a WP login for us to take a closer look.

Thanks.