Overlay effect on Baskerville Theme

  • Author
    Posts
  • #2634091

    michaeldolf
    Member

    Hi All!

    I’m relatively new to CSS, and barring making the odd thing disappear and changing text formatting, I could do with a little help on the more advanced stuff.

    On the following page on my site https://australianbeasts.com/category/australian-beasts-collection/
    The feature image has a transition effect built into the theme (Baskerville) when you hover over it.

    Is it possible to change that so that instead of it making the image larger it overlays text instead?

    I’d need to do it for each post individually as at the moment I would like ‘Coming Soon’ to pop up when you hover a cursor over it. I will then need to remove this when the eBook is actually released.

    Cheers,

    Michael

    The blog I need help with is australianbeasts.com.

    #2634232

    Hi there, we can do this. In working this out, the thing that occurred to me is that on touch devices (tablets, phones and touch-screen computers) the Coming Soon will not appear since those devices can’t “hover” like you can with a mouse. That means that they aren’t going to see the “Coming Soon”. Thinking further on this, it may be best to put the “Coming Soon” above the more tag in the posts, that way it shows for all devices. It could be done as heading 3 so it is larger and perhaps the color set to red.

    Here is the code to defeat the existing hover behavior and add the new Coming Soon. See what you think.

    .featured-media a:hover img, .featured-media a:focus img {
        opacity: 1;
        transform: none;
    }
    .featured-media {
        position: relative;
    }
    .featured-media::before {
        color: transparent;
        content: "Coming Soon";
        position: absolute;
        top: 250px;
        transition: color, background-color 0.7s ease;
        width: auto;
        text-align: center;
        padding: 10px;
        left: 35%;
        box-sizing: border-box;
        display: block;
    }
    .featured-media:hover::before {
        color: #fff;
        background-color: #E60C18;
        display: block;
    }

The topic ‘Overlay effect on Baskerville Theme’ is closed to new replies.