How can I make a div title disappear when an over is in effect with :hover

Question

I have a main bigger title (VEGETATION MANAGEMENT) and then a hover overlay with brings up a smaller title and description. I cant seem to figure out how to make the original title disappear when the overlay is in effect. Please can someone help with this as I know it will be something simple but after hours of searching for a solution, I would like to move on with building the rest of the site. PS this is my first time building a website from scratch, so very much still in the learning stages.

 * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Raleway", sans-serif; background-color: #919191; position: relative; } /*=================================================*/ /*================ HEADER ====================*/ /*=================================================*/ header { background: linear-gradient(to right, #2e2e2e 0%, #4e4e4e 100%); display: flex; justify-content: space-between; align-items: center; position: sticky; width: 100%; height: 80px; padding: 10px 2%; box-shadow: 0 5px 5px #585858; margin: 0; } header ul { margin-block-end: 0; } header li, a { font-weight: 300; font-size: 1em; color: #c4c4c4; text-decoration: none; }.logo { max-height: 50px; cursor: pointer; } nav.social { align-items: center; justify-content: center; text-align: center; }.nav-links li { display: inline-block; padding: 0px 40px; }.nav-links li a { transition: all 0.3s ease 0s; }.nav-links li a:hover, .nav-links li a:active { font-weight: 500; transition: all 0.3s ease 0s; color: white; border-bottom: 2px solid #fff; }::-webkit-scrollbar { width: 25px; }::-webkit-scrollbar-track { border: 7px solid #2e2e2e; box-shadow: inset 0 0 2.5px 2px rgba(0, 0, 0, 0.5); }::-webkit-scrollbar-thumb { background: linear-gradient( 45deg, #9e9e9e, #585858 ) } social-icons { display: inline-block; padding: 0px 15px; }.social-icons a { margin: 0px 20px; transition: all 0.3s ease 0s; }.social-icons a:hover { transition: all 0.3s ease 0s; color:white; } #main-header-home { position: fixed; padding-top: 0; } /*=================================================*/ /*=============== HOME PAGE ===================*/ /*=================================================*/.main-home { display: flex; background-image: url(Images/homebg.jpg.jpg); background-position: right; width: 100%; max-height: 100vh; background-size: cover; padding-bottom: 80px; }.main-home-text { width: 350px; padding: 100px 20px; margin: 40px; background-color: rgba(0, 0, 0, 0.7); max-height: 100vh; margin: 0 10% 0 65%; height: 100%; text-align: center; color: white; overflow: hidden; overflow-y: scroll; }.main-home-title { margin-bottom: 30px; }.main-home-content p { margin: 40px 0; }.main-home-btn { padding:10px; background-color: #585858; color: #c4c4c4; border-radius: 10%; font-weight: 700; }.main-home-btn:hover { cursor: pointer; background-color: #c4c4c4; color: #585858; } /*=================================================*/ /*=============== SERVICES PAGE ===================*/ /*=================================================*/.image { position: relative; width: 80%; height: 150px; margin: 40px 10%; border: 5px solid #2e2e2e; box-shadow: 5px 5px 5px #585858; z-index: 0; }.main-img-title { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 2em; font-weight: 700; color: white; opacity: 1; }.img-title { background-color: rgba(0,0,0,0.7); padding: 2px 10px; }.bg-img { height: 100%; width: 100%; object-fit: cover; }.img-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:rgba(0,0,0,0.6); color: #ffffff; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.5s; }.img-overlay:hover { opacity: 1; }.overlay-img-title { font-size: 1.75em; font-weight: 700; }.overlay-img-description { font-size: 0.7em; margin-top: 0.25em; padding: 0 2%; } /*=================================================*/ /*================ FOOTER ====================*/ /*=================================================*/.main-footer { display: flex; justify-content: space-between; align-items: center; position: sticky; width: 100%; height: 80px; background: linear-gradient(to right, #2e2e2e 0%, #484848 100%); background-color: #2e2e2e; padding: 10px 2% 0 2%; box-shadow: 0 -5px 5px #575757; }.main-footer h2{ font-size: 1rem; font-weight: 700; color: #c4c4c4; padding: 0; margin: 0; }.main-footer p { color: #c4c4c4; font-size: 0.7em; } #main-footer-home { position: fixed; bottom: 0; }

 <body> <header> <img class="logo" src="logo.png" alt="Kompact Production Logo"> <nav class="main-nav"> <ul class=" nav-links"> <li><a href="#">SERVICES</a></li> <li><a href="#">PORTFOLIO</a></li> <li><a href="#">APPLICATIONS</a></li> <li><a href="#">CONTACT US</a></li> </ul> </nav> <div class="social-icons"> <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16"> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" /> </svg></a> <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16"> <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0.42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" /> </svg></a> <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16"> <path d="M0 1.146C0.513.526 0 1.175 0h13.65C15.474 0 16.513 16 1.146v13.708c0.633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0.694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" /> </svg></a> </div> </header> <div class="image"> <img class="bg-img" src="Images/vegetation.jpg.jpg" alt="Vegetation"> <div class="main-img-title"> <div class="img-title">VEGETATION MANAGEMENT</div> </div> <div class="img-overlay"> <div class="overlay-img-title">VEGETATION MANAGEMENT</div> <p class="overlay-img-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe magnam iusto voluptatibus animi facere voluptatum nihil repellendus. Voluptatibus nihil voluptatem enim corporis assumenda, quas modi veritatis exercitationem provident, quaerat voluptas.Quis enim non laborum? Maxime consectetur nemo laboriosam nam, ratione repudiandae quod tenetur ut fugiat assumenda aspernatur sequi at a eaque quas repellendus officiis reiciendis, voluptatem dolore obcaecati ipsum fuga.</p> </div> </div> <footer class="main-footer"> <div class="contact"> <h2>Contact:</h2> <p>Phone: +44 7875108163<br>Email: admin@kompactsolutions.co.uk </p> </div> <div class="social-icons"> <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16"> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" /> </svg></a> <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16"> <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0.42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" /> </svg></a> <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16"> <path d="M0 1.146C0.513.526 0 1.175 0h13.65C15.474 0 16.513 16 1.146v13.708c0.633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0.694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" /> </svg></a> </div> </footer> </body> </html>

Thanks in advance!

Answer 1

You just need to manage both items from the parent level rather then going after just the single child hover action.

Change:

.img-overlay:hover {
    opacity: 1;

}

To:

    .image:hover .img-overlay {
       opacity: 1;
    }

    .image:hover .main-img-title {
       opacity: 0;
    }

Answer 2

Your parent element for main-img-title and img-overlay is image . Therefore you need to apply hover pseudo-class on image element.

replace

.img-overlay:hover {
    opacity: 1;
}

with this

.image:hover .main-img-title {
    opacity: 0;
}
.image:hover .img-overlay {
    opacity: 1;
}

 * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Raleway", sans-serif; background-color: #919191; position: relative; } /*=================================================*/ /*================ HEADER ====================*/ /*=================================================*/ header { background: linear-gradient(to right, #2e2e2e 0%, #4e4e4e 100%); display: flex; justify-content: space-between; align-items: center; position: sticky; width: 100%; height: 80px; padding: 10px 2%; box-shadow: 0 5px 5px #585858; margin: 0; } header ul { margin-block-end: 0; } header li, a { font-weight: 300; font-size: 1em; color: #c4c4c4; text-decoration: none; }.logo { max-height: 50px; cursor: pointer; } nav.social { align-items: center; justify-content: center; text-align: center; }.nav-links li { display: inline-block; padding: 0px 40px; }.nav-links li a { transition: all 0.3s ease 0s; }.nav-links li a:hover, .nav-links li a:active { font-weight: 500; transition: all 0.3s ease 0s; color: white; border-bottom: 2px solid #fff; }::-webkit-scrollbar { width: 25px; }::-webkit-scrollbar-track { border: 7px solid #2e2e2e; box-shadow: inset 0 0 2.5px 2px rgba(0, 0, 0, 0.5); }::-webkit-scrollbar-thumb { background: linear-gradient( 45deg, #9e9e9e, #585858 ) } social-icons { display: inline-block; padding: 0px 15px; }.social-icons a { margin: 0px 20px; transition: all 0.3s ease 0s; }.social-icons a:hover { transition: all 0.3s ease 0s; color:white; } #main-header-home { position: fixed; padding-top: 0; } /*=================================================*/ /*=============== HOME PAGE ===================*/ /*=================================================*/.main-home { display: flex; background-image: url(Images/homebg.jpg.jpg); background-position: right; width: 100%; max-height: 100vh; background-size: cover; padding-bottom: 80px; }.main-home-text { width: 350px; padding: 100px 20px; margin: 40px; background-color: rgba(0, 0, 0, 0.7); max-height: 100vh; margin: 0 10% 0 65%; height: 100%; text-align: center; color: white; overflow: hidden; overflow-y: scroll; }.main-home-title { margin-bottom: 30px; }.main-home-content p { margin: 40px 0; }.main-home-btn { padding:10px; background-color: #585858; color: #c4c4c4; border-radius: 10%; font-weight: 700; }.main-home-btn:hover { cursor: pointer; background-color: #c4c4c4; color: #585858; } /*=================================================*/ /*=============== SERVICES PAGE ===================*/ /*=================================================*/.image { position: relative; width: 80%; height: 150px; margin: 40px 10%; border: 5px solid #2e2e2e; box-shadow: 5px 5px 5px #585858; z-index: 0; }.main-img-title { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 2em; font-weight: 700; color: white; opacity: 1; }.img-title { background-color: rgba(0,0,0,0.7); padding: 2px 10px; }.bg-img { height: 100%; width: 100%; object-fit: cover; }.img-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:rgba(0,0,0,0.6); color: #ffffff; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.5s; } /* REMOVE THIS.img-overlay:hover { opacity: 1; }*/.image:hover.main-img-title { opacity: 0; }.image:hover.img-overlay { opacity: 1; }.overlay-img-title { font-size: 1.75em; font-weight: 700; }.overlay-img-description { font-size: 0.7em; margin-top: 0.25em; padding: 0 2%; } /*=================================================*/ /*================ FOOTER ====================*/ /*=================================================*/.main-footer { display: flex; justify-content: space-between; align-items: center; position: sticky; width: 100%; height: 80px; background: linear-gradient(to right, #2e2e2e 0%, #484848 100%); background-color: #2e2e2e; padding: 10px 2% 0 2%; box-shadow: 0 -5px 5px #575757; }.main-footer h2{ font-size: 1rem; font-weight: 700; color: #c4c4c4; padding: 0; margin: 0; }.main-footer p { color: #c4c4c4; font-size: 0.7em; } #main-footer-home { position: fixed; bottom: 0; }

 <body> <header> <img class="logo" src="logo.png" alt="Kompact Production Logo"> <nav class="main-nav"> <ul class=" nav-links"> <li><a href="#">SERVICES</a></li> <li><a href="#">PORTFOLIO</a></li> <li><a href="#">APPLICATIONS</a></li> <li><a href="#">CONTACT US</a></li> </ul> </nav> <div class="social-icons"> <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16"> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" /> </svg></a> <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16"> <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0.42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" /> </svg></a> <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16"> <path d="M0 1.146C0.513.526 0 1.175 0h13.65C15.474 0 16.513 16 1.146v13.708c0.633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0.694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" /> </svg></a> </div> </header> <div class="image"> <img class="bg-img" src="Images/vegetation.jpg.jpg" alt="Vegetation"> <div class="main-img-title"> <div class="img-title">VEGETATION MANAGEMENT</div> </div> <div class="img-overlay"> <div class="overlay-img-title">VEGETATION MANAGEMENT</div> <p class="overlay-img-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe magnam iusto voluptatibus animi facere voluptatum nihil repellendus. Voluptatibus nihil voluptatem enim corporis assumenda, quas modi veritatis exercitationem provident, quaerat voluptas.Quis enim non laborum? Maxime consectetur nemo laboriosam nam, ratione repudiandae quod tenetur ut fugiat assumenda aspernatur sequi at a eaque quas repellendus officiis reiciendis, voluptatem dolore obcaecati ipsum fuga.</p> </div> </div> <footer class="main-footer"> <div class="contact"> <h2>Contact:</h2> <p>Phone: +44 7875108163<br>Email: admin@kompactsolutions.co.uk </p> </div> <div class="social-icons"> <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16"> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" /> </svg></a> <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16"> <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0.42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" /> </svg></a> <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16"> <path d="M0 1.146C0.513.526 0 1.175 0h13.65C15.474 0 16.513 16 1.146v13.708c0.633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0.694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" /> </svg></a> </div> </footer> </body> </html>