HTML Button over photo help!

jbriginshawphoto

I am making progress in my HTML learning, but I am stumped on this one. I have attached two photos, the first is what I want it to look like (and it does when I am editing). The second is what happens when I click publish. The button does not actually sit over the birch tress as I would like it to. Also, it does not link to my contact page as I would like it to. Here is what I have:

Planning a Wedding? Let's Chat!

CSS:
img {
opacity: 0.4;
}

.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #640000;
color: white;
font-size: 22px;
padding: 20px 35px;
border: none;
cursor: pointer;
border-radius: 5px;
}

.container .btn:hover {
background-color: black;
}

jbriginshawphoto

Crap I did this last time i posted a question, too. Here is the HTML:

< html >
< div class="sm-page-layout-row yui3-g" data-layout-row="hw">

<

div class="sm-page-layout-column yui3-u" style="width: 100%;" data-layout-column="0">

<

div id="sm-page-widget-bjBCsv2W" class="sm-page-widget sm-page-widget-image sm-page-widget-31193361" data-typeid="31193361">
< div class="sm-page-widget-content">

< body> < div class="container" data-clientid="sm-image-model_3">< img itemprop="image" src="https://photos.smugmug.com/2015/Magog/n-ZwDXWg/i-3pgGMZd/2/45c35451/X2/i-3pgGMZd-X2.jpg" id="sm-tile-image-yui_3_8_0_1_1634826207445_334" class="sm-image" data-clientid="sm-image-model_3" alt="Untitled photo" title=""> < button class="btn">< a href="https://www.jbriginshawphotography.com/Contact">Planning a Wedding? Let's Chat! < /div> < /body> < /div>

< /div >
< /div >
< /div >
< /htm l >

tomnovy

Hey There. Have you tried this tutorial: https://portal.photom.me/customization/add-full-width-image-to-your-smugmug-site-with-text-and-or-button-over-it/

Allen

Where are you putting this html? If in a widget the < html > tags are not required.

jbriginshawphoto

@tomnovy Thank you for that! It's essentially what I was after. I only encountered one hiccup. I want to adjust the opacity of the image and managed to do that, only the text was also affected by the opacity. Any ideas? Here is the CSS:

h1 {
color: #450011;
margin: 0;
width: 100vh;
text-align: center;
font-size: 70px;
font-weight: 1000;
letter-spacing: 3px;
}

a {
border: 0 solid;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
outline: 1px solid;
outline-color: rgba(255, 255, 255, 0.5);
outline-offset: 0px;
text-shadow: none;
-webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
color: #fff;
font-size: 25px;
padding: 10px;
}

.hero {
background: pink;
background-image: url("https://photos.smugmug.com/photos/i-3pgGMZd/2/45c35451/O/i-3pgGMZd.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 60vh;
opacity: 0.7;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

tomnovy

The html would need to be restructured so as an easy solution, upload an image that you have created in photoshop with lower opacity. You will not need to make any changes to the html/code by doing so.

jbriginshawphoto

Great idea - thanks!