how can I put text on top of an image

  • Unknown's avatar
    hellojamiejean · Member ·

    I need to put the words: About, Blog, Resume, and Contact, over a picture so I can hyperlink the individual words to their pages.

    Please help, the video I watched is from 2008 and does not work

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

  • Unknown's avatar
    innisfreehomestead · Member ·

    Hello there,

    I’m seeing the menu at the top of your page, is that what you were referring to? If not, what image would you like the words to be over?

    Let me know,
    Sage

  • Unknown's avatar
    hellojamiejean · Member ·

    Basically, I would like my menu available in two places, at the top of the page and as a clickable link on top of the image on my home page.

    I created a PDF with that capability, but when loaded, it shows up as a clickable link and not the picture I want people to see when visiting the site.

    I watched a video on how to do this but it was old and the code did not work correct (for me).

  • Unknown's avatar
    innisfreehomestead · Member ·

    Hey there!

    This can be done in HTML/CSS but I’d need to know exactly how you would like it to look. Would you mind uploading a snapshot of that PDF to your site and then pasting the link in here so I could see what you are aiming for?

    Thanks,
    Sage

  • Unknown's avatar
    hellojamiejean · Member ·

    https://hellojamiejean.com/

    the link is located right under the word “home” and above the picture. It is titled “front-page”

  • Unknown's avatar
    innisfreehomestead · Member ·

    Thanks!

    I’ve written up some code — it can be a bit tricky making sure everything works without being able to place the code in myself, so let me know if something isn’t looking right :)

    1. Delete everything off your homepage, image and all, and replace it with the following code (you’ll need to use the HTML/text editor, don’t place it in the visual editor): 

    <div class="picmenuouter">
  <img class="alignnone size-full wp-image-110 size-big" src="https://hellojamiejeandotcom.files.wordpress.com/2016/10/front-page1.png?w=780" alt="front-page1">
  <div class="picmenuinner">
  <a href="/about/">About</a>
  <a href="/blog/">Blog</a>
  <a href="/resume/">Resume</a>
  <a href="/contact/">Contact</a>
  </div>
</div>

    2. Drop this into your custom CSS area: 

    .picmenu {
	display: none;
}

@media screen and (min-width: 768px){
	.picmenu {
		display: block !important;
	}
	.picmenuouter {
		position: relative;
	}
	.picmenuinner {
		position: absolute;
		bottom: 0;
		height: 390px;
		left: 64px;
	}
	.picmenuinner a {
		display: block;
		color: #000;
		letter-spacing: 1px;
	}
	.picmenuinner a:hover {
		border-color: transparent;
	}
	.picmenuouter img {
		margin-bottom: 0px;
	}
	.picmenuinner a {
		display: block;
		color: #000;
		letter-spacing: 1px;
		margin-bottom: 60px;
	}
}

    Now, unfortunately this code is a bit limited in that it will only show for desktops. Making it work once the image starts shrinking and is a different size at every browser screen gets quite a bit more complicated.

    Hope this works,
    Sage

  • The topic ‘how can I put text on top of an image’ is closed to new replies.