"portfolio circular overlay" (#1164764) / CodexThemes

Comments

1
harrybrowndesign started the conversation
May 9, 2017 at 2:35pm
Hi, i would like to know if there's possible to change the color gradient of the circle overlay option for portfolios. As you see in the page, i have three portfolio categories, and it would fit to the brand identity to have the possibility to change the gradient for each category.

Thanks a lot.

7,122

Oliver replied

May 10, 2017 at 11:38am

HI!

pls. use following css:

.hover-circular.title-on-page .portfolio-item .image .overlay:after, .hover-circular.title-on-page .gallery-item .overlay-wrap .overlay:after {
    background: -moz-linear-gradient(top, rgba(30,87,153,0) 65%, rgba(0,0,0,0.5) 100%) !important;
    background: -webkit-linear-gradient(top, rgba(30,87,153,0) 65%,rgba(0,0,0,0.5) 100%) !important;
    background: linear-gradient(to bottom, rgba(30,87,153,0) 65%,rgba(0,0,0,0.5) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#80000000',GradientType=0 ) !important;
}

For adding gradient for each row, add the extra class in the row settings, for example "row-1-gradient" so the css will be

.row-1-gradient .hover-circular.title-on-page .portfolio-item .image .overlay:after, .hover-circular.title-on-page .gallery-item .overlay-wrap .overlay:after {
    background: -moz-linear-gradient(top, rgba(30,87,153,0) 65%, rgba(0,0,0,0.5) 100%) !important;
    background: -webkit-linear-gradient(top, rgba(30,87,153,0) 65%,rgba(0,0,0,0.5) 100%) !important;
    background: linear-gradient(to bottom, rgba(30,87,153,0) 65%,rgba(0,0,0,0.5) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#80000000',GradientType=0 ) !important;
}

.row-2-gradient .hover-circular.title-on-page .portfolio-item .image .overlay:after, .hover-circular.title-on-page .gallery-item .overlay-wrap .overlay:after {
    background: -moz-linear-gradient(top, rgba(30,87,153,0) 65%, rgba(0,0,0,0.5) 100%) !important;
    background: -webkit-linear-gradient(top, rgba(30,87,153,0) 65%,rgba(0,0,0,0.5) 100%) !important;
    background: linear-gradient(to bottom, rgba(30,87,153,0) 65%,rgba(0,0,0,0.5) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#80000000',GradientType=0 ) !important;
}

and ect

Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list.

Regards, Oliver

1
harrybrowndesign replied
June 5, 2017 at 6:47pm
what i would like to change its only the hover color gradient. With this it only changes the gradient overlay of the image (not just the hover)

Thank you and sorry if I did not express myself well.
7,122
Oliver replied
June 6, 2017 at 8:03am
Hi, sorry, not quite sure what do you mean. Can you pls provide more details with screenshots?
Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list.

Regards, Oliver
1
harrybrowndesign replied
June 6, 2017 at 11:22am
I was wondering if it could be possible to change the color of the hover effect in a "circle overlay" portfolio style.
As you see in the image, the color is blue. If this is possible, i would like to ask if it's possible too to change the color for each portfolio grid. (in the image you only see two of them, but i have three rows with one portfolio category on each, and each category is associated to one color).
thank you

7,122

Oliver replied

June 6, 2017 at 2:16pm

HI!

CSS:

.hover-circular .portfolio-item .image .overlay .overlay-circle, 
.hover-circular .gallery-item .overlay-wrap .overlay .overlay-circle {
    background: -moz-linear-gradient(to bottom right, rgba(0, 188, 212,0.75) 0%, rgba(53, 64, 147,0.75) 100%) !important;
    background: -webkit-linear-gradient(to bottom right, rgba(0, 188, 212,0.75) 0%,rgba(53, 64, 147,0.75) 100%) !important;
    background: linear-gradient(to bottom right, rgba(0, 188, 212,0.75) 0%,rgba(53, 64, 147,0.75) 100%) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s, opacity 0.4s ease 0s;
}

The example of adding css for each row is in my previous reply.

Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list.

Regards, Oliver

1
harrybrowndesign replied
June 6, 2017 at 5:56pm
Perfect, i had to use a ID instead of a class, but it works for me.
Thanks a lot ;)
7,122
Oliver replied
June 7, 2017 at 7:05am
Feel free to contact us if you need help.
Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list.

Regards, Oliver