Columns and hover

• 

  bryanhill10 · Member · Aug 31, 2017 at 3:18 pm

  • Copy link
  • Add topic to favorites

  Hello, new to css. I need help adding 3 columns to the content area on my home page. Its directly under the area that says “Viridians 3 Divisions” viridiancorporation.com

  My goal is to add 3 images with a vertical line after the 1st and 2nd image. Then when I hover over the images, I would like the image to disappear and be replaced with the text that is already there but with a much cleaner look. Somewhat similar to what you see in the “In the news” area on my home page.

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

• 

  thesacredpath · Member · Sep 1, 2017 at 5:50 pm

  • Copy link

  Hi there, this can be done, but I would need to have you make some changes to the content in that section. First off, surround each section and it’s following paragraph in a div with a CSS class. I would suggest the following.

  <div class="my-left">
  <h3>...
  <p>...
  </div>

  Do the same for Living Landscape and for Wast Water treatment with my-mid and my-right as the CSS classes.

  Once that is done, let me know and I’ll get to work on the CSS to make the three columns and do the hover effect. Do know that I’ll limit the over effect to screens 1024px and wider since touch devices, such as phones and tablets cannot “hover”.