Talon: Portfolio change hover of image

Hi there,

I am looking to change the hover transition over images in the portfolio widget from the zoom and text displayed underneath to a simple colour overly and text overlay.

Can you help?

Hi,

Yes… try this code please:

.portfolio-item:hover img {
    transform: none;
    top: 0;
    z-index: 0;
}

.portfolio-item:hover .portfolio-content h4 a {
    color: white !important;
    font-weight: bold;
}

.portfolio-item:hover:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.2);
}

.portfolio-item:hover .portfolio-content {
    z-index: 1;
}

Add the code to Customize > additional CSS.

Regards,

Thank you! that’s great. There is an extra colour border when you hover and I also wish to centre the text when hovered. Can you help?

Hello,

Add this please:

.portfolio-item{
    padding: 0;
}

.portfolio-item:hover .portfolio-content{
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

Thank you, the text is now justified but there is now no border around any of the thumbnails. When I add padding again there is still the red border when I hover. I wish to have space between thumbnails and a red colour overlay over image but not the extra red border which appears immediately when i hover an image, a spilt second before the full colour overly of image.

Hope you can help?
Stephen

Oh okay… then please remove this code:

.portfolio-item{
    padding: 0;
}

And update this code:

.portfolio-item:hover:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.2);
}

with this:

.portfolio-item:hover:after {
    content: '';
    position: absolute;
    left: 7px;
    top: 7px;
    width: 95%;
    height: 95%;
    background-color: rgba(239, 3, 3, 0.2);
}

You may need to adjust the value for the left top width and height