HTML Button over photo help!

jbriginshawphotojbriginshawphoto TorontoRegistered Users Posts: 21 Big grins
edited October 21, 2021 in SmugMug Support

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:

Untitled photo 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;
}

Comments

  • jbriginshawphotojbriginshawphoto TorontoRegistered Users Posts: 21 Big grins
    edited October 21, 2021

    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 >

  • tomnovytomnovy SmugMug Support Hero Leicester, United KingdomRegistered Users Posts: 1,096 SmugMug Employee
    SmugMug Support Hero | Customizer | My SmugMug site - http://www.photom.me | Customization Portal - https://portal.photom.me
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,945 Major grins

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

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • jbriginshawphotojbriginshawphoto TorontoRegistered Users Posts: 21 Big grins

    @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;
    }

  • tomnovytomnovy SmugMug Support Hero Leicester, United KingdomRegistered Users Posts: 1,096 SmugMug Employee

    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.

    SmugMug Support Hero | Customizer | My SmugMug site - http://www.photom.me | Customization Portal - https://portal.photom.me
  • jbriginshawphotojbriginshawphoto TorontoRegistered Users Posts: 21 Big grins

    Great idea - thanks!

Sign In or Register to comment.