Hover Text to Entry Featured Image

  • Resolved Samantha Victoria

    (@fernveil)


    7 years, 12 months ago

    Hello,

    I was wondering if there was any way to add hover text to the center of my content entrys featured image. I tried to find a solution and it seems I need to add both HTML and CSS, I’m just not sure what the code would exactly be for it to work for this theme.
    I’m assuming whatever code I’ll be adding will be added to the content-entry.php file?
    Essentially what I’m looking for is when you hover over an entry featured image, it will say something like “View the Post”.

    Much Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Fotis

    (@markwaregr)

    7 years, 12 months ago

    Hi there,
    you can try this 

    .entry-featured:hover:before {
    content:'View this post';
    position:absolute;
    right:0;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
    height:24px;
    line-height:24px;
    color:#fff;
    background:#010101;
    max-width:120px;
    pointer-events:none;
}

    in your custom CSS box.
    Its a CSS only solution.
    Let me know if you need additional help on this.

    Thread Starter Samantha Victoria

    (@fernveil)

    7 years, 12 months ago

    Hi Fotis,

    Thank you for the quick reply and simple solution, this worked perfectly! 🙂

    Fotis

    (@markwaregr)

    7 years, 12 months ago

    Glad I could help!
    I’d like to ask you, if you like the theme and could take a minute to review it here it would help us a lot!

    Thread Starter Samantha Victoria

    (@fernveil)

    7 years, 12 months ago

    Hi Fotis,

    Done! With such a great theme and service, I was happy to submit a review. 🙂
    I do have one last question in regards to the hover content. Is it possible to individually change the style and transformations of the words? For example, say I wanted VIEW (‘Josefine Sans’, 15px uppercase), the (‘Lusitana’, 13px lowercase/italic), and POST (‘Josefin Sans’, 15px uppercase).

    Fotis

    (@markwaregr)

    7 years, 12 months ago

    Hi there,
    you can change fonts to your preference using this plugin
    http://www.cssigniter.com/docs/article/using-google-fonts/

    But for more complex scenarios you will need to create custom CSS controllers
    which will target certain elements (this is covered in the article above). I can provide these CSS rules if you point which items you want to change exactly, or you can have a look at this guide http://www.cssigniter.com/docs/article/using-the-developer-tools/
    It will help you learn how to use your browser’s developer tools in order to be able to locate such styling easily and quickly.

    Let me know if you need additional help on this.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Hover Text to Entry Featured Image’ is closed to new replies.