Fitting images properly and zoom on hover-CodePudding

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" >
  <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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

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


  </head>
  <body >
    

    <!---Navbar--->
      <header>
        <nav >
          <div >
            <a style="font-size: 45px; color: #ffffff;"  href="#">
              <strong>StudioPick</a>
              <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
              </button>
              <div  id="navbarSupportedContent">
                <ul >
                  <li >
                    <a  style="color: #ffffff;" aria-curresnt="page" href="index.html">Home</a>
                  </li>
                  <li >
                    <a  style="color: #ffffff;" href="login.html">Log In</a>
                  </li>
                  <li >
                    <a  href="signup.html">Sign Up</a>
                  </li>
                </ul>
              </div>
          </div>
        </nav>
      </header>
    <!---Navbar--->

    <!---Hero--->
    <div >
        <div >
          <button >STUDIO</button>
        </div>
    </div>
      
    <div >
        <div >
            <button >ARTIST</button>
        </div>
    </div>
    <!---Hero--->
      


      <footer  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!

CodePudding user response：

I fixed some styling and wrote the javascript. I also added the jQuery script and its working perfectly

$(".profileselect").on("mouseover", function () {
      $(this).parent().parent().addClass("hovered")
    })
    $(".profileselect").on("mouseout", function () {
      $(this).parent().parent().removeClass("hovered")
    })

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: hidden;
      padding-top: 20px;
      isolation: isolate;
    }

    .split::after {
      content: "";
      position: absolute;
      inset: 0;
      transition: all 0.3s ease-in-out;
      background-size: cover;
      background-position: center;
      z-index: -1;
    }

    .left {
      left: 0;
    }

    .left::after {
      background-image: url('https://media.istockphoto.com/id/499718289/photo/faisal-mosque-islamabad-pakistan.webp?s=612x612&w=is&k=20&c=9K6B2okHbAfbN3uLdpLLgb_Nl6lRxtflRAp75WbAPVE=')
    }

    .right {
      right: 0;
    }

    .right::after {
      background-image: url('https://media.istockphoto.com/photos/pakistan-monument-islamabad-picture-id535695503?k=20&m=535695503&s=612x612&w=0&h=S16wHXc-b3AkL7YMrcFkR2pDGFJA1bRsPmAfQlfrwkc=')
    }

    .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%;
    }

    .split.hovered::after {
      transform: scale(1.1);
    }

    .split.hovered button {
      color: purple;
    }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<!---Navbar--->
  <header>
    <nav >
      <div >
        <a style="font-size: 45px; color: #ffffff;"  href="#">
          <strong>StudioPick</a>
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>
        <div  id="navbarSupportedContent">
          <ul >
            <li >
              <a  style="color: #ffffff;" aria-curresnt="page" href="index.html">Home</a>
            </li>
            <li >
              <a  style="color: #ffffff;" href="login.html">Log In</a>
            </li>
            <li >
              <a  href="signup.html">Sign Up</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <!---Navbar--->

  <!---Hero--->
  <div >
    <div >
      <button >STUDIO</button>
    </div>
  </div>

  <div >
    <div >
      <button >ARTIST</button>
    </div>
  </div>
  <!---Hero--->

  <footer  id="footer">
    <p>@Bekaedo <br>StudioPick 2022 ©</p>
  </footer>

CodePudding user response：

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.

CodePudding user response：

try this

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