Responsive image with button

Support
#1

Hello,
I’m trying to add a button to my home page background image that has a color overlay when the cursor is over it? I have tried several different codes I have found here, but none of them seem to work. I am using Ethos.

Thank you!
Shireen

#2

@syarahmadi

I dunno if this is what you’re looking for but here’s an example.

Btn Style:
background: #01A490;

CSS

.Location_btn{
    font-family: "Cachet",Arial,sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 20px;
    line-height: 44px;
    letter-spacing: -1px;
    text-align: center;
    color: #FFF;
    width: 180px;
    border-radius: 8px;
    margin: 60px;
    padding: 8px 0px;
    background-color: black;
    border: 2px solid !important;
    border-color: transparent;
    display: block;
    max-width: 290px;
    margin-left: auto;
    margin-right: auto;
}
.Column_btn:hover{
    background-color: #01A490;
    color: white !important;
    opacity: 0.3;
}
#3

Hello aa2zz6,
Almost! Is there more code that I need to make the background image also have a hover effect. I’m looking to do it like this:http://www.surface85.com/ but with 2 centered buttons. Is this possible?
Thank you!
Shireen

#5

Ok I have figured it out with the code you provided, but the overlay opacity seems to be covering the buttons also. Is there a way to separate it? I really appreciate your help!

The code I have in so far:

.my-section-button1 {
font-family: “Cachet”,Arial,sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 20px;
line-height: 44px;
letter-spacing: -1px;
text-align: center;
color: #FFF;
width: 180px;
border-radius: 8px;
margin: 60px;
padding: 8px 0px;
background-color: transparent;
border: 2px solid !important;
border-color: transparent;
display: block;
max-width: 290px;
margin-left: auto;
margin-right: auto;
}
.Column_btn1:hover{
background-color: #01A490;
color: white !important;
opacity: 0.3;
}
.home-lashes:hover{
background-color: #01A490;
color: white !important;
opacity: 0.3;

#6

@syarahmadi

If you add the css code inside the class .my-first-section your image will get that black hover transparency effect.

.my-first-section {
    -webkit-filter: brightness(100%);
}

.my-first-section:hover {
    -webkit-filter: brightness(70%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
#7

Yes!! You’re a genius. Thank you so much!

1 Like
#8

The overlay is working great. The buttons though are also darkened, making the white buttons look gray when hovered over. Is there a way that I can have this same overlay on the background image with the code you provided, but not include the buttons in each of the two columns? I really appreciate your help!

#9

If you add an image element to fill the section rather than assigning an image to the section directly you can add 2 buttons to the section and use css margin-top and margin-left to move the buttons around.

edit: remove the my.first.section from the section element to the image element* forgot to mention that


#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.