setting images in the list of articles

Hello mti,

Apolozy for the inconvenience. Unfortunately, there are no built-in settings to adjust image sizes or add hover animations directly in the image list. However, using custom CSS can help achieve your requirements. I'm giving you some CSS that you can check. Please apply this CSS to your template and adjust the values to fit your needs. Let me know if further clarification is needed!

For image size For image size adjustment:

.sppb-img-responsive {
    height: 130px; /* Set the height of the image */
    width: 240px; /* Set the width of the image */
}

For hover animation:

*Smooth zoom effect

.image-list img {
    width: 100%; /* Adjust as needed */
    height: auto;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.image-list img:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}

*Rotate Effect

.sppb-article-img-wrap img {
    transition: transform 0.3s ease-in-out;
}

.sppb-article-img-wrap:hover img {
    transform: rotate(5deg) scale(1.05); /* Slight rotation and zoom */
}

*Grayscale to Color

.sppb-article-img-wrap img {
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    filter: grayscale(100%);
}

.sppb-article-img-wrap:hover img {
    transform: scale(1.1);
    filter: grayscale(0); /* Restores color */
}

*Slide-Up

.sppb-article-img-wrap img {
    transition: transform 0.3s ease-in-out;
}

.sppb-article-img-wrap:hover img {
    transform: translateY(-10px); /* Moves the image upwards */
}

*Border Expansion

.sppb-article-img-wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
    transition: border 0.3s ease-in-out;
    border: 2px solid transparent;
}

.sppb-article-img-wrap:hover {
    border: 2px solid #3498db; /* Adds a colored border on hover */
}

.sppb-article-img-wrap img {
    transition: transform 0.3s ease-in-out;
}

.sppb-article-img-wrap:hover img {
    transform: scale(1.05); /* Slight zoom effect */
}

*Zoom with Shadow

.sppb-article-img-wrap img {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.sppb-article-img-wrap:hover img {
    transform: scale(1.1);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); /* Enhances the shadow */
}