Upper and Lower image layers in Button

[MolemanProductions]

Hi.

am trying to animate a background image and color transition.
Trying to recreate Murphy Bread and Breakfast template.

Is there a way to have upper and lower elements in button element?

I wish for it to start with image and color overlay (0.5 opacity)

on Hover
Image scale 1.2
Color Overlay (0 Opacity)

Here is what i was playing with:

$el{
  background-image: linear-gradient(rgba(18, 18, 18, 0.45), rgba(18, 18, 18, 0.45)), url(/wp-content/uploads/architecture-portfolio-western-work-03.jpg);
  -webkit-transition: background-image 0.2s ease-in-out;
  transition: background-image 0.2s ease-in-out;
}
  
$el :hover {
  background-image: linear-gradient(rgba(18, 18, 18, 0), rgba(18, 18, 18, 0)), url(/wp-content/uploads/architecture-portfolio-western-work-03.jpg);
}

If you recommend an easier way, please let me know

[christian]

Hey @MolemanProductions,

It’s not possible to replicate the effect in the BnB demo to the button as they’re structurally very different.

I’d recommend taking the HTML and CSS code in the demo and modify them instead of using the Button element. You can find the CSS in Theme Options > CSS and the HTML in the 2nd row of the Rooms section.

Please also note that the code in the demo is provided as-is. Modifying it would require us to spend custom development time which is not a part of product support.

Thank you for understanding.