[tonyleesParticipant]

Hi There,

I have a feature that I am trying to replicate on a Envira gallery and I am struggling… (Nothing new there lol)

I am trying to replicate the hover over effect on http://www.nichedesignarchitects.com/ if you hover over an image a translucent colored overlay scrolls up over the image with a descriptive text… can this be achieved using Envira?

Your advice would be greatly appreciated.

Thanks
Tony

[LelyModerator]

Hi Tony,

Thanks for posting in.
Unfortunately, that design/function is not available in Envira Gallery by default. It can achieve using customization but that would be outside the scope of our support.

This thread might help to achieve that:https://community.theme.co/forums/topic/add-hover-text-on-image/

Always,
X

[tonyleesParticipant]

Hi
Thanks for the reply, I have followed the link and followed the instructions, by putting the html in a text element from cornerstones and the css in custom

I get an image displayed but no hover effect…

What have I done wrong?

Also I have found a post on Envira forum that allows the effect… http://enviragallery.com/docs/style-image-title-caption-hover-effects/ … again I have tried following the instructions without success… has anything changed with envira with it being included with Xtheme or should this work?

My site is http://www.mardybums.co.uk and I am working on the homepage

Thanks for the great software!

Best regards
Tony

[ZeshanMember]

Hi Tony,

I’ve checked your site and the first image in Envira Gallery is showing the title on hover (see: http://prntscr.com/af28bj). You can follow the exact instructions mentioned in Envira Gallery docs and it should work as we are not overwriting any functionality of Envira Gallery. However, we cannot guarantee and support the custom solution as it’s a 3rd party plugin and custom development is outside the scope of support we can provide.

Thanks for understanding

[tonyleesParticipant]

HI,

I have nearly got this working with envira using the caption display instructions… but I am having trouble with the image fade and background color being displayed.

I have placed the css in the customizer custom css but the image doesn’t fade on hover… any ideas?

/* Give the gallery item a background color that will show through when the image is faded, modify as desired */
.envira-gallery-item-inner { background-color: #a6b34a !important; }

/* The opacity of the image on hover */
.envira-gallery-item-inner img.envira-gallery-image.envira-gallery-image:hover { opacity: 0.2 !important; }

/* Position caption and hide it by default */
.envira-gallery-item-inner .caption {
   opacity: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   
   /* Optional: add transitions so the caption smoothly fades in/out on hover */
   -webkit-transition: opacity 0.5s ease;
   -moz-transition: opacity 0.5s ease;
   -o-transition: opacity 0.5s ease;
   transition: opacity 0.5s ease;
}

/* Show caption on hover */
.envira-gallery-item-inner:hover .caption { opacity: 1; }

Thanks
Tony

[tonyleesParticipant]

HI,

I think I have sorted it! had to change the opacity within Envira.css only issue now is if I hover over the caption text

Cheers
Tony

[Paul RModerator]

Hi Tony,

You can try adding this under Custom > CSS in the Customizer.

body .envira-gallery-link:hover img {
    opacity: 0.2 !important;
}

Hope that helps.

[tonyleesParticipant]

Hi unfortunately that didn’t help.

When I hover over the text the image opacity goes back to 1

Thanks
Tony

[tonyleesParticipant]

HI,
the next issue I have is with Icons, is it possible to load more icons… or do I just use cropped images?

I have found a icon set I would like to use (attached)

[tonyleesParticipant]

I have uploaded the jpg, as the eps file was too big.

Thanks
Tony

[LelyModerator]

Hi Tony,

Please also try adding the following CSS:

.envira-gallery-item-inner .caption:hover {
    width: 100%;
    padding: 25%;
    height: 100%;
    background: rgba(166,179,74,.5) !important;
}

On you current setup, caption is outside the link with overlay. Since, it’s a different entity, the overlay is not applied to it. We need to apply the same overlay on caption.

Hope this helps.

[tonyleesParticipant]

hmmmm this is causing more problems as it is no longer a link….

[ZeshanMember]

Hi Tony,

As this is a custom development, further customizations from here would be outside the scope of support we can offer. If you need more in-depth changes, you may wish to consult with a developer.

Thanks for understanding.

[tonyleesParticipant]

Ok thanks for the help so far, as this is a third party plugin provided with Xtheme how can I gain support from Envira?

Also have you seen my question regarding icons?

Thanks again
Tony

[ChristopherModerator]

Hi there,

If you need Envira support, please check this link :
http://enviragallery.com/docs/getting-support-envira/

In regards with icons, I don’t know which icon you would like to change, please provide us with more information.

Thanks.

[Author]

Posts