Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #894274

    So, I’m working on a site and it’s bothering me that when I use the mosaic method for highlighting projects or the post slider that I can’t have the same method that they are displayed.

    For example, on https://www.curlyhost.com/start-something/ when you hover over an image the title shows up and the project zooms in. When I’m on an individual project and want to have the same idea but have it slide through instead of show up in a mosaic there is no option to have the overlay and zoom in effect like on the other element. https://www.curlyhost.com/stories/dennis-nagelkirk/

    Is there any CSS that someone has created that lets the post slider and the mosaic portfolio thing look and work the same?


    Hey Andrea,
    Sorry we don’t have that yet. But it looks like you are using the layout builder for your posts, couldn’t use use the element you wanted on that page?

    Best regards,


    Well, I guess it’s more obvious when you see a project that has more items to slide through:

    At the bottom the slider just fades through and when you show the title it only shows below the post – it would be awesome if there was a chunk of CSS I could plop in there to make it look the same on hover as it does on the landing pages.


    Hi Andrea,

    Do you mean the slider here
    https://cl.ly/3R1q1l1F2z1t ? I don’t see any titles there at all.
    Or do you mean the instagram feed below? That is done via a plugin, we cannot really help you with that.

    Best regards,


    Hey Victoria,

    I changed this post to show titles:


    I started playing with the CSS to have the titles have a negative top margin and it just worked funky. Ideally if I could find the chunk of CSS that worked here:


    Then I could swap it out for the post slider element and get them to work in the same manner.



    The title is disabled on the post slider. Please enable it then add the following css code.

    .slide-content {
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.3);
        width: 100%;
        height: 100%;
        text-align: center;

    Adjust and extend as necessary. Obviously, you can make the content display only on hover, same as the portfolio effect.

    Best regards,

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.