Docs

[owaves]

Hello,

I did some research on this in the forums and couldn’t find a good answer. I was wondering if there is an easy way to implement an image hover on the portfolio home page images. I have a bunch of images in rows and I want to hover over an image and it display text over a faded version of the image. I am using Integrity and I am aware this can be done on another stack. Is this possible without switching stacks?

the page for reference is http://www.owaves.com/x/day-plans

[Rue Nel]

Hi There,

Thanks for writing in! To implement an image hover on the portfolio page images, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

#x-iso-container .entry-featured {
    position: relative;
}

#x-iso-container .entry-wrap.cf {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    opacity: 0;
    transition: opacity 0.35s linear;
}

#x-iso-container .hentry:hover .entry-wrap.cf {
    opacity: 1;
}

#x-iso-container .entry-header{
    display: table;
    width: 100%;
    height: 100%;
}

#x-iso-container h2.entry-title.entry-title-portfolio {
    display: table-cell;
    vertical-align: middle;
}

We would loved to know if this has work for you. Thank you.

[owaves]

Works Great! How would I change the color of the text or add more text to it? Do I use javascript?

[Prasant Rai]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

div#x-iso-container h2.entry-title.entry-title-portfolio a {
    color: #fff !important;
}

Thanks.

[owaves]

THANK YOU!

[Rue Nel]

You are most welcome!

[owaves]

Hello I hate to re-open this but something weird is happening when I click on the link there is a white border around the text. I can’t seem to target it to remove it.

[Christopher]

Hi there,

Please add this code :

a:focus, select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="submit"]:focus, input[type="checkbox"]:focus {
    outline: none;
}

Hope it helps.

[owaves]

Awesome thank you guys for all your help!

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[owaves]

Hello there, I am having a problem with the links. I need the text to appear on hover but it seems that I can only click on the text for the link to work. Would it be possible to make it so that I can click on image to use the link?

[Rue Nel]

Hi There,

Thanks for updating in! To make the whole image as a link, please update this block of code:

#x-iso-container h2.entry-title.entry-title-portfolio {
    display: table-cell;
    vertical-align: middle;
}

You need to replace it using this code instead;

#x-iso-container h2.entry-title.entry-title-portfolio {
    display: table-row;
}

#x-iso-container h2.entry-title.entry-title-portfolio a{
    display: table-cell;
    vertical-align: middle;
}

Please let us know if this works out for you.

[owaves]

Works beautifully, you guys are so pro! THANKS!

[Thai]

Glad it worked 🙂

If you need anything else please let us know.

[owaves]

Hello there, I was looking over my page and I noticed the images are slightly smaller and the categories are smaller than they were before we added this styling. Is there any way I can increase the size a little bit for the images and the categories? Thanks!

http://www.owaves.com/x/day-plans/

[Author]

Posts