Espied: Portfolio thumbnails hover text

• 

  designedbyccc · Member · Oct 22, 2014 at 10:29 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  Is it possible using CSS to add a different sentence to each portfolio thumbnail on this home page https://twoviewsnz.wordpress.com/ when hovered on…?

  Currently when hovered on each has their respective title and a “view” button I would love any help to add a sentence below the view button in small type.

  Thanks very much :)

  The blog I need help with is: (visible only to logged in users)

• 

  pcosta88 · Member · Oct 22, 2014 at 10:36 pm

  • Copy link

  Hello!

  You can add mouse over effects and pop-up effects without CSS
  See here for the pop-up effects
  https://en.forums.wordpress.com/topic/how-to-insert-text-popup-boxes-into-my-posts?replies=16

  See here for some mouse over effects on text and pictures:
• 

  designedbyccc · Member · Oct 22, 2014 at 10:48 pm

  • Copy link

  Thanks very much for your help, but not exactly what I am after…

  I want the short sentence to be part of the thumbnail when hovered on, not in a separate yellow box :)

• 

  designsimply · Member · Oct 22, 2014 at 10:53 pm

  • Copy link

  You can add plain text using the “content” property in CSS.

  Here’s a related article: http://css-tricks.com/css-content/

  I couldn’t find an easy way to add text below the View button, but this is an example that adds text below the title:

  .home .post-25 .entry-title:after {
  	color: #7ACEE7;
  	content: "This is a sentence.";
  	display: block;
  	padding-top: .5em;
  }

  The .home part limits the rule to the home page.

  The .post-25 part refers to the “Bruce Springsteen & Big Man” post.

• 

  designedbyccc · Member · Oct 22, 2014 at 11:06 pm

  • Copy link

  Awesome you have made my day designsimply :)