Acabado: Make Reflective Hero Image

by Josh Koop | Last Updated: October 27, 2020
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete disclaimer information for more details.

This is a simple quick fix which just jazzes up your homepage without doing anything to make the load any slower, you will want to replace the background I list with your homepage image to have it mirror your image.

This minor set of custom CSS will give your page a more custom look, check out the image below of it on my site as an example.

.featured-categories-wrapper {
    padding: 125px 0px 20px 0;
}

.hero-container {
    width: 500px;
    height: 333px;
    position: relative;
background-position: bottom;
  background-size: cover;
    background: url(https://acabadotheme.com/wp-content/uploads/2019/08/Fast-As-Lightning.jpg);
box-shadow: 0px 50px 70px rgba(0,0,0,0.3),
              0px 10px 10px rgba(0,0,0,0.1);
}

.hero-container::before {
    content: "";
    width: inherit;
    height: 42%;
    position: absolute;
    bottom: -42%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3),white);
    z-index: 1;
}

.hero-container::after {
    content: "";
    background-image: inherit;
    width: inherit;
    height: 40%;
    position: absolute;
    bottom: -40%;
    transform: scaleY(-1);
    background-position: bottom;
    background-size: cover;
opacity: 0.5;

}
I love technology, I have plenty of technical side experience but never really thought of blogging as a way to earn an income. With everything that has gone on in the last couple years and the instability of the job markets I started to learn how to blog and build affiliate niche sites to add more income channels to give me the chance to break free from the financial chains that bind me and find real freedom!