Options
HTML Button over photo help!
jbriginshawphoto
Registered Users Posts: 34 Big grins
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;
}
0
Comments
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">
< /div >
< /div >
< /div >
< /htm l >
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/
Where are you putting this html? If in a widget the < html > tags are not required.
My Website index | My Blog
@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;
}
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.
Great idea - thanks!