How to overlay a link button to middle of an image?

[ostinoh]

Hello –

I’m not understanding how I would be able to overlay a link button (to another url) and place it into a space in an image I uploaded and added to my page.

I’m ok at looking at CSS code. But need the extra direction or idea if there is another way to achieve what I need to do.

We have flyer that I’m adding to our website and instead of the directions on where to register I wanted to replace that with Register Button.

Please let me know if you need more info or any ideas on how I can do this.

Thank you

[chrisburton]

We need to see some sort of example to help you with the best approach.

[ostinoh]

Justin,

Yes that is exactly what I’m looking to do. Do I create the css and add that the styles.css file?

Thanks,
David

[chrisburton]

@ostinoh Yes. Although, you could just set a width on the figure element rather than use inline-block.

[ostinoh]

One of my biggest learning curves is finding where in the .css file I place the code. Here is a link to the page in question to review the styles.

http://www.victorysoccerohio.com/node/206

Do I add the following to one of the lines?

a {
  text-decoration: none;
}

figure {
  display: inline-block;
  position: relative;  
}

.btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, #1A2980 10%, #26D0CE 90%); 
  color: white;
  padding: .5em 1em;  
  border: none;  
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 300;
}

[chrisburton]

Well, to be quite honest, there’s no way I’m searching through all of those css files in your head section to determine how you’ve structured your CSS. You could place it in the following file at the bottom:

http://www.victorysoccerohio.com/sites/all/themes/vso/css/style.css?nbkbmb

[Author]

Posts