Text over photo link

bluelinebreakroom · Member · Feb 20, 2017 at 10:38 pm
Copy link

Add topic to favorites
Webpage. http://www.bluelinebreakroom.com

In the “Choose your service area of my page, I have six photo links with text overlay and zoom when hovering. I am trying to mimic that look further down the page in the “Our Services section.”

In the Our Services section, I currently have six photo links set up. I want to add a text overlay and zoom when hovering just like above but cant figure out the html or css.

To add the code, I opened the theme customizer and placed it under the featured content description.

Any help is appreciated.

This is the code I used to place the photo links.
```
<p><a href="http://bluelinebreakroom.com/pricing/"><img class="aligncenter wp-image-382 size-full" src="https://bluelinebreakroom.files.wordpress.com/2017/02/pexels-photo-199036.jpeg" alt="button_get-quote" width="1000" height="1000" /></a></p>
<p><a href="http://bluelinebreakroom.com/products/"><img class=" size-full wp-image-511 aligncenter" src="https://bluelinebreakroom.files.wordpress.com/2017/02/coffee-coffee-maker-restaurant-cafe-529772.jpeg" alt="button_our-products" width="1000" height="1000" /></a></p>
</div>










<hr style="clear:both; visibility: hidden;" />
```
The blog I need help with is: (visible only to logged in users)
staff-loquaciousloon · Staff · Feb 21, 2017 at 10:56 pm
Copy link
Hi @bluelinebreakroom!

Creating a grid can be tricky (especially if you’re going to add cool hover effects and lay text over the top!)

First, I’d recommend a different approach to setting up the grid. Instead of three columns, try this:

https://cloudup.com/iFz8dktMAks

That puts each image in it’s own box, and also removes some of the centering and other spacing that looks like it came from the post editor.

With that, we can try some CSS, like this:

https://cloudup.com/iAaLK2x2t3o

They’re both a bit long, so I’ve hosted them on cloudup. Use More > Copy Text to grab the code.

For the text overlay, we need to put the text in manually. I made up some titles based on the images, but if you look in the code you’ll see where they go (near the end of the CSS on the second link).

Let me know how it looks!
bluelinebreakroom · Member · Feb 23, 2017 at 2:42 am
Copy link
That is great thanks. I can’t thank you enough. I never expected you to write the code for me. Done in a few minutes.

I just adjusted the .grid-link-wrapper to center the text over the photos and changed the spacing between photos to match the photo links above.

10 STARS!
staff-loquaciousloon · Staff · Feb 23, 2017 at 1:49 pm
Copy link
Happy to help! :)
bluelinebreakroom · Member · Feb 23, 2017 at 8:55 pm
Copy link
Sorry but one more question.
I am utilizing the coding to place 3 photo links on my products page. How do I adjust the CSS so it does not impact the links on my home page we created?
bluelinebreakroom · Member · Feb 24, 2017 at 3:52 am
Copy link
Okay, so I renamed the grid-link-wrapper to grid-link-wrapper2 on the products page and adjusted the CSS accordingly. just about got it working.

I just can’t figure out how to get the 3 photo links to center on the page and there is a gray bar at the bottom of the photos I cant get to go away.

Should I open a new thread or do you think you can help ?
staff-loquaciousloon · Staff · Feb 24, 2017 at 1:38 pm
Copy link
If you add an additional style, you can narrow it’s scope with the page ID.
How to find a page ID.

With that ID (in the case of your product page, that would be 160) you can make a style that targets just the one page.

Example:
```
/* general style for all grid items*/
.grid-link-wrapper {
   background-color: #333;
}

/* more specific style to use a lighter background on the product page */

.page-id-160 .grid-link-wrapper {
   background-color: #eee;
}
```
This way you can write the main style to cover the whole site, and then smaller, specific styles to change just one thing on another page.

No items found.