Text Under Projects- Port Theme

• 

  welcometotravels · Member · May 15, 2017 at 4:18 pm

  • Copy link
  • Add topic to favorites

  I am currently using the Port Theme and I am wanting to add text underneath my projects, not just when somebody rolls over the image.

  On welcometo.travel if you see the three images of the graffiti alley, Australia map and then two people.

  Underneath I would like the titles of these projects. I believe it would be a simple CSS, but unable to work it out.

  Any help greatly appreciated

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

• 

  thesacredpath · Member · May 15, 2017 at 7:42 pm

  • Copy link

  Hi there, one thing we could do would be to make the title that appears when you hover visible all the time with the following custom CSS.

  #content .project.small .title {
  	opacity: 1;
  }

  The second option involves hiding the title on hover and then using the unique project id CSS class with the “after” pseudo selector to add the titles below the images. The first rule hides the title on hover, the second sets the styling for the text, and the other three add the text.

  #content .project.small a:hover .title {
  	opacity: 0;
  }
  #content .project.small:after {
  	display: block;
  	margin-top: 15px;
  	font-size: 120%;
  	font-weight: 600;
  }
  #content #project-141.project.small:after {
  	content: "The Itinerary";
  }
  #content #project-134.project.small:after {
  	content: "About Us";
  }
  #content #project-138.project.small:after {
  	content: "The Who, What, When";
  }

• 

  welcometotravels · Member · May 15, 2017 at 8:34 pm

  • Copy link

  You are a legend.

  I am a WordPress novice and that has helped me so much.

  I will pay it forward once I get a grasp of the coding world.

• 

  thesacredpath · Member · May 16, 2017 at 12:48 am

  • Copy link

  You are welcome, and thanks.