Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 11, 2021 at 8:20 pm #1309609
    Knutnik

    Hi there,

    I want to change the background-color in the text part at the bottom of the portfolio item preview.
    How do I do that?

    I also want some space between the items.
    When moving over the images, they should change from black and white to color.
    Is there a setting for that in Enfold?

    Thank you in advance.
    Regards
    Knutnik

    July 13, 2021 at 4:39 am #1309873
    Rikard

    Hi Knutnik,

    Please try the following in Quick CSS under Enfold->General Styling:

    .grid-sort-container .no_margin.av_one_half {
    width: 49%;
}

#kat-grid .grid-content, #kat-grid .avia-arrow, #kat-grid .grid-entry-title {
    background: red;
}

    I’m not sure I understand what you mean by the hover state of the images though, could you try to explain that a bit further please?

    Best regards,
    Rikard

    July 13, 2021 at 10:08 am #1309901
    Knutnik

    Hi Rikard,

    that worked perfekt – thanks.
    But it didn’t work to change the font-color with:
    color: #ad9f8f;

    What am I doing wrong?

    Best regards,
    Knutnik

    July 15, 2021 at 5:34 am #1310182
    Rikard

    Hi,

    Please try this CSS as well:

    .grid-image img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.grid-image img:hover {
  -webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
  filter: grayscale(0);
}

h3.grid-entry-title a {
  color: #ad9f8f;
}

    Best regards,
    Rikard

    July 15, 2021 at 4:54 pm #1310309
    Knutnik

    Hi Rikard,

    thanks a lot.
    Unfortunately, that’s not all.
    In the case of mouse over or hover, the image should be displayed in color instead of any white areas.
    If that is not possible, it would at least be nice if the color could be seen under the semi-transparent white surface.
    “-webkit-filter: grayscale (0)” doesn’t seem to work.

    In addition, I would still like to add some space in the middle of the grid and the same space under each item, as in the example.
    Isnt that possible?

    The hit would be if you could also fade in the title text (exerpt) only when you mouse over or hover – also as in the example.

    Thank you very much in advance and best regards,
    Knutnik

    July 17, 2021 at 5:09 am #1310460
    Rikard

    Hi,

    Thanks for the update. Let’s try to stick to one problem at a time.

    If you try to add % to the hover state, then it should work:

    .grid-image img:hover {
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}

    And you can remove the overlay by using this CSS:

    .grid-image .image-overlay {
    display: none !important;
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.