I’ve tried playing around with the code, however X has different set of codes which makes it difficult for me to make something similar to your theme here: http://theme.co/x/demo/integrity/3/

I want my image to react the same to your buttons on Pike Place Palace, Roman Forum, Etc.

Thanks for writing in!

To achieve that, you can add this under Custom > CSS in the Customizer.

.page-id-43 .x-promo-image-wrap {
    background-color: #ffba00;
}

.page-id-43 .x-promo-image-wrap:hover img {
    opacity:0;
}

.page-id-43 .x-promo-image-wrap:before {
content: "\f067";
line-height: 62px;
display: block;
position: absolute;
margin: -30px 0 0 -30px;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
font-size: 32px;
font-size: 3.2rem;
text-align: center;
text-shadow: none;
vertical-align: middle;
color: #fff;
background-color:##ffba00;
border-radius: 100em;
z-index: 0;
font-family: "fontawesome" !important;
font-style: normal !important;
font-weight: normal !important;
speak: none;
-webkit-font-smoothing: antialiased;
}

Hope that helps.

Instead of the page’s ID class, you can add your own class to the promo like [promo class=”my-class”] and use the CSS

.my-class .x-promo-image-wrap {
background-color: #d8745d;
}

Change my-class with your own class.

Regarding the buttons, please see http://theme.co/x/demo/integrity/1/shortcodes/buttons/. For the hover, you can again add a class to the button and use the sample CSS

a.x-btn.my-class:hover {
    background-color: orange;
    box-shadow: 0 0.25em 0 0 darkorange, 0 4px 9px darkorange !important;
}

Hope that helps. 🙂

I still dont understand how I can make the image from the columns become a clickable button when I hover over it.

So it would be the image, than your mouse hovers over it, the color changes and you see the a small icon in the middle (assuming that is the button).

How would I go about doing that?

Or I may have misunderstood what you said.

Sorry for the confusion.

Add a class name like my-class to your content band and use image sghortcode :http://theme.co/x/demo/integrity/1/shortcodes/images/.
Like this :
[image type="thumbnail" src="/media/x-img-demo-2.jpg" link="true" href="#example" info="popover" info_place="top" info_trigger="hover" info_content="Add in a little extra information here to describe the story behind your photographs!" title="Extra Information" alt="Example"]

Instead of #example put the URL.

Then you can add the following CSS code under Customize -> Custom -> CSS

.my-class a.x-img:hover img {
opacity: 0;
}
.my-class a.x-img:hover {
background-color: red;
}

.my-class a.x-img{
transition: background-color 0.3s ease,box-shadow 0.3s ease;
}

Hope that helps.