Currently, I am facing two challenges that I need assistance with. Firstly, I am struggling to properly fit my images in a way that allows the person in the picture to be visible while still filling the entire screen. Secondly, I am looking for guidance on setting up a transform function that will turn text purple and zoom in and out an image behind it when hovering over a button. Below is the code snippet I am currently working with:
Code Snippet:
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d40405b5c5b5d4e5f6f1a011d011f024d4a5b4e1e">[email protected]</a>/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)');
});
});
Thank you for your help!