Fitting images properly and zoom on hover

I have two issues I’m dealing with at the moment. The first question is: I want to fit my images properly so that you can see the person in the picture while the images are still filling the entire screen. The second question is: how do I set up a transform function so that when you hover over the button, the text turns purple and the image behind it zooms in and out? Here is the current code that I have:

Code Snippet: https://hover-example.diknight55.repl.co/

HTML:

<!doctype html>
<html lang="en" class="h-100">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.98.0">
    <title>StudioPick</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

    <link href="CSS/profileselect.css" rel="stylesheet">


  </head>
  <body class="d-flex h-100 text-center text-white">
    

    <!---Navbar--->
      <header>
        <nav class="navbar navbar-expand-lg navbar-light">
          <div class="container-fluid">
            <a style="font-size: 45px; color: #ffffff;" class="navbar-brand" href="#">
              <strong>StudioPick</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" style="color: #ffffff;" aria-curresnt="page" href="index.html">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" style="color: #ffffff;" href="login.html">Log In</a>
                  </li>
                  <li class="nav-item2">
                    <a class="nav-link" href="signup.html">Sign Up</a>
                  </li>
                </ul>
              </div>
          </div>
        </nav>
      </header>
    <!---Navbar--->

    <!---Hero--->
    <div class="split left">
        <div class="centered">
          <button class="profileselect">STUDIO</button>
        </div>
    </div>
      
    <div class="split right">
        <div class="centered">
            <button class="profileselect">ARTIST</button>
        </div>
    </div>
    <!---Hero--->
      


      <footer class="mt-auto text-white-50" id="footer">
        <p>@Bekaedo <br>StudioPick 2022 ©</p>
      </footer>
    </div>

    <script src="Javascript/hover.js"></script>

  </body>
</html>

CSS:

body {
    font-family: Arial;
    color: white;
}
.navbar-light {
  background-color: transparent;
  z-index: 20;
}
.navbar-nav{
  justify-content: space-between;
  
}
.navbar-brand {
  font-size: 35px;
}
.nav-item{
  color: #686868 !important;
  font-size: 20px;
  padding-right: 15px;
}
.nav-item2{
  background-color: #9370DB !important;
  border-radius: 15px !important;
  width: 95px !important;
  text-align: center !important;
  font-size: 20px;
}
#navbarSupportedContent{
  position: relative;
  right: -1375px;
}



.split {
    height: 100%;
    width: 50%;
    position: fixed;
    z-index: 0;
    top: 0;
    overflow-x: hidden;
    padding-top: 20px;
    transition: all 0.3s ease-in-out;
}

.left {
    left: 0;
    background-image: url('../Images/kennybeats-stu.jpeg')
}

.right {
    right: 0;
    background-image: url('../Images/uzi-performing.jpeg')
}


.centered button {
    font-size: 50px !important;
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    background-color: #000000 !important;
    text-align: center !important;
}

.left :hover {
    background-size: 150%;
}

Javascript:

$(document).ready(function() {

    $('.split').mouseover(function() {

        $(this).find('.profileselect').css('transform', 'scale(1.2)');
    });

    $('.split').mouseout(function() {

        $(this).find('.profileselect').css('transform', 'scale(1)');
    });
});

Thanks!

Answer

Check Images visiblity :

.right, .left { 
      background-size: cover; 
}

FYI, And also you have used navbar-expand-lg so its showing header improperly. try removing it and check.

Advertisement

Answer