[cbstacyParticipant]

Hello,

I am trying to achieve the same effect as:

http://www.vissla.com

Specifically, I will be placing images of varying sizes on our site and I would like the images to change opacity when the customer hovers of them with their mouse. Additionally, I would like to have a text labeling the image similar to how the site above does showing “Shop”, “Instagram”, etc.

[cbstacyParticipant]

This reply has been marked as private.

[cbstacyParticipant]

I must also add, I don’t know is “Opacity” is the correct term. I want the image to “Dim” just like it does in the example website above.

[ThaiModerator]

Hi There,

#1] Please add the following CSS under Customizer > Custom > Edit Global CSS:

.x-dim-img:hover {
    opacity: 0.75;
}

#2] Add the x-dim-img CSS class to the class field of your images.

Hope it helps 🙂

[cbstacyParticipant]

Thai,

Your solution worked perfectly for what I said but I realized I was asking the wrong thing. I am very close however. I added the following code to get the fade transitions:

.x-dim-img {background-color: #fff;
-webkit-backface-visibility: hidden;
opacity: .5;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
transition-property: opacity;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
transition-property: opacity;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
width: 100%;
}
.x-dim-img:hover {
opacity: 100;
}

Now, I’m trying to accomplish the fading navigational text in the example here:

http://www.vissla.com

[RadModerator]

Hi there,

Would you mind providing more details? Current hover effect is color change, fading means transparency. Would you like your navigational texts with opacity? That will make it more unreadable.

Thanks!

[cbstacyParticipant]

Rad,

I would like to place the white text that fades during hover in the center of the image like shown on http://www.vissla.com

[LelyModerator]

Hi There,

Thank you for the clarification.
Please add class x-col-with-text-fade to the columns CLASS field. Then below the image, add TEXT element with your preferred text. Add class text-fade center-text to this text element’s class field. Then on Settings > Tab > Custom CSS add the following:

.x-col-with-text-fade {
    position: relative;
}
.text-fade {
    position: absolute;
    top: 50%;
    width:100%;
}
.x-col-with-text-fade:hover .text-fade {
    opacity: 0;
}

Hope this helps.

[Author]

Posts