I used a pseudo element, :before, to help with my fixed background image because if not, it would cause my website to scroll slow due to the background-attachment repaint function. I fixed the background image to run smoothly, but now the background image is overflowing throughout the whole document and not staying in the div.
I have tried to use different overflow options and tried putting the hero class that controls the pseudo element on different elements to see if that would help.
https://jsfiddle.net/4prhubwy/
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ukiyo Sushi ツ</title>
<link href = "/style.css" type = "text/css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div class = "hero">
<header>
<nav class = "navbar">
Ukiyo Sushi ツ
<ul>
<li>About us</li>
<li>Menu</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class = "sushiPlatter">
<h2>Chef's Special Sushi Platter</h2>
<br>
View Menu
</div>
</header>
</div>
<section class = "idkYet">
<div>
<span>hello</span>
</div>
</section>
</body>
</html>
css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: white;
/*overflow: hidden;*/
}
.hero{
position: relative;
overflow: hidden;
min-height: 100%;
}
.hero::before{
background-image: url("/img/header.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
content: '';
height: 100%;
position: fixed;
left: 0;
top: 0;
width: 100%;
will-change: transform;
z-index: -1;
}
body{
font-family: "Fira Sans", sans-serif;
font-size: 2rem;
color: white;
}
.logo{
font-size: 3rem;
margin: .5em;
border-bottom: 2px solid transparent;
}
.logo:hover{
border-bottom: 2px solid white;
}
.navbar{
/*position: fixed;*/
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.navbar ul{
display: inline-flex;
list-style: none;
margin-left: auto;
}
.navbar li{
margin: 1.15em;
border-bottom: 2px solid transparent;
}
.about:hover, .menu:hover, .services:hover, .contact:hover{
border-bottom: 2px solid white;
}
.sushiPlatter{
font-size: 1rem;
text-align: left;
display: flex;
height: 100vh;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 2.15em 2em;
}
.sushiPlatter h2{
font-weight: bold;
}
.sushiPlatter a{
margin: 0em 7em;
}
.sushiPlatter a:hover{
opacity: .25;
transition: 1s;
}
section{
height: 100vh;
color: black;
}
.idkYet{
color: white;
display: block;
}
add a background to the rest of the element so it hides the pseudo while scrolling on top of it, section for instance here :
example
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* selector moved here to be seen */
section {
height: 100vh;
color: black;
background: white;/* rule added , use your own color or img */
}
/* end selector moved */
a {
text-decoration: none;
color: white;
/*overflow: hidden;*/
}
.hero {
position: relative;
overflow: hidden;
min-height: 100%;
}
.hero::before {
background-image: url(https://i.imgur.com/bs8H4p7.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
content: '';
height: 100%;
position: fixed;
left: 0;
top: 0;
width: 100%;
will-change: transform;
z-index: -1;
}
body {
font-family: "Fira Sans", sans-serif;
font-size: 2rem;
color: white;
}
.logo {
font-size: 3rem;
margin: .5em;
border-bottom: 2px solid transparent;
}
.logo:hover {
border-bottom: 2px solid white;
}
.navbar {
/*position: fixed;*/
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.navbar ul {
display: inline-flex;
list-style: none;
margin-left: auto;
}
.navbar li {
margin: 1.15em;
border-bottom: 2px solid transparent;
}
.about:hover,
.menu:hover,
.services:hover,
.contact:hover {
border-bottom: 2px solid white;
}
.sushiPlatter {
font-size: 1rem;
text-align: left;
display: flex;
height: 100vh;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 2.15em 2em;
}
.sushiPlatter h2 {
font-weight: bold;
}
.sushiPlatter a {
margin: 0em 7em;
}
.sushiPlatter a:hover {
opacity: .25;
transition: 1s;
}
.idkYet {
color: white;
display: block;
}
<div class="hero">
<header>
<nav class="navbar">
Ukiyo Sushi ツ
<ul>
<li>About us</li>
<li>Menu</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="sushiPlatter">
<h2>Chef's Special Sushi Platter</h2>
<br>
View Menu
</div>
</header>
</div>
<section class="idkYet">
<div>
<span>hello</span>
</div>
</section>
Related
I am making a website. I have a problem now.
This is my website right now. As you can see the blue logo in the middle must be against the top. Does anyone know how I can get it against the top? Does that has to do with the flex-box? If that's the case can I get some explanation about the flexbox? Thanks in advance!
HTML:
<html>
<head>
<meta name="viewport" content="width=Ddevice-width, initial-scale=1.0">
<title>Korps Commandotroepen</title>
<link rel="stylesheet" href="index2.css">
</head>
<body>
<div class="header">
<div class="col-1">
<div id="mainbox" onclick="openFunction()">☰</div>
<div class="nav">
<ul>
<li> <img src="images/minis1.png" class="logo"></li>
</ul>
</div>
<div class="left-text">
<h1><span class="auto-type"></span></h1>
Ontdek meer
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/typed.js#2.0.12"></script>
<script>
var typed = new Typed(".auto-type", {
strings: ["Moed", "Beleid", "Eer", "Trouw", "Trots", "NUNC AUT NUNQUAM"],
typeSpeed: 150,
backSpeed: 150,
loop: false,
});
</script>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
.header{
width: 100%;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
}
.col-1{
flex-basis: 100%;
flex-grow: 1;
background-image: url(images/kct.jpg);
background-size: cover;
background-position: center;
color: #fff
}
.logo{
width: 55px;
cursor: pointer;
}
.nav{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.nav ul{
display: flex;
list-style: none;
}
.left-text{
width: 70%;
margin: 230px auto 0;
}
.left-text h1 span{
font-size: 50px;
font-weight: 500;
}
.left-text a img{
width: 60px;
margin-right: 20px;
}
.left-text a{
/* display: flex; */
align-items: center;
text-decoration: none;
margin: 30px 0 30px;
display: inline-block;
background: transparent;
color: #fff;
font-weight: 300;
letter-spacing: 1px;
padding: 15px 50px;
border-radius: 30px;
border: 4px solid #fff; /*922125*/
}
.left-text a:hover{
background: #fff;
color: #333
}
#mainbox{
font-size: 35px;
}
The problem is that #mainbox takes the whole width and .nav goes down. One solution would be to make .nav position absolute and top 0.
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
.header{
width: 100%;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
}
.col-1{
flex-basis: 100%;
flex-grow: 1;
background-image: url(images/kct.jpg);
background-size: cover;
background-position: center;
color: #fff
}
.logo{
width: 55px;
cursor: pointer;
}
.nav{
position:absolute;
top:0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.nav ul{
display: flex;
list-style: none;
}
.left-text{
width: 70%;
margin: 230px auto 0;
}
.left-text h1 span{
font-size: 50px;
font-weight: 500;
}
.left-text a img{
width: 60px;
margin-right: 20px;
}
.left-text a{
/* display: flex; */
align-items: center;
text-decoration: none;
margin: 30px 0 30px;
display: inline-block;
background: transparent;
color: #fff;
font-weight: 300;
letter-spacing: 1px;
padding: 15px 50px;
border-radius: 30px;
border: 4px solid #fff; /*922125*/
}
.left-text a:hover{
background: #fff;
color: #333
}
#mainbox{
font-size: 35px;
}
<html>
<head>
<meta name="viewport" content="width=Ddevice-width, initial-scale=1.0">
<title>Korps Commandotroepen</title>
<link rel="stylesheet" href="index2.css">
</head>
<body>
<div class="header">
<div class="col-1">
<div id="mainbox" onclick="openFunction()">☰</div>
<div class="nav">
<ul>
<li> <img src="images/minis1.png" class="logo"></li>
</ul>
</div>
<div class="left-text">
<h1><span class="auto-type"></span></h1>
Ontdek meer
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/typed.js#2.0.12"></script>
<script>
var typed = new Typed(".auto-type", {
strings: ["Moed", "Beleid", "Eer", "Trouw", "Trots", "NUNC AUT NUNQUAM"],
typeSpeed: 150,
backSpeed: 150,
loop: false,
});
</script>
</body>
</html>
This question already has an answer here:
Understanding z-index stacking order
(1 answer)
Closed last year.
I am trying to create a header that when you scroll it will stick to the top of the page.
I have tried positon: fixed but it moved behind the the div containing the image. I tried sticky it's the same story. Anh as you can see I tried position: fixed and sticky on some placed to see i it would work but it doesn't.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
/* padding-top: 100px; */
}
.section1 {
/* position: sticky; */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
text-align: center;
color: blueviolet;
}
.section1 img {
/* position: sticky; */
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
position: relative;
text-align: center;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
li,
a,
button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
}
header {
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
}
.header_logo {
cursor: pointer;
margin-left: -70px;
}
.nav_links {
list-style-type: none;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0s;
}
.nav_links li a:hover {
color: #0088a9;
}
button {
padding: 9px 25px;
background-color: rgba(0, 139, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 139, 169, 0.8);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<img class="header_logo" src="./youtube_logo.png" alt="youtube's logo" width="5%" height="5%">
<nav=c lass="navbar">
<ul class="nav_links">
<li>SERVICE</li>
<li>STORE</li>
<li>CONTACT</li>
<li>MORE</li>
</ul>
</nav>
<a class="social_buttion" href="#"><button>SOCIAL</button></a>
</header>
<section class="section1">
<img class="page_logo1" src="./2f606ad14bf9171e5f41b42a01b4441f.jpg">
<div class="centered">
this is center
</section>
</div>
<div class="section2">
<img class="page_logo2" src="./2f606ad14bf9171e5f41b42a01b4441f.jpg">
</div>
</body>
</html>
Just add z-index:100; to your header and it remains on top when scrolling and the image goes behind.
Reference for z-index
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
/* padding-top: 100px; */
}
.section1 {
/* position: sticky; */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
text-align: center;
color: blueviolet;
}
.section1 img {
/* position: sticky; */
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
position: relative;
text-align: center;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
li,
a,
button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
}
header {
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
z-index:100;/* add this */
}
.header_logo {
cursor: pointer;
margin-left: -70px;
}
.nav_links {
list-style-type: none;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0s;
}
.nav_links li a:hover {
color: #0088a9;
}
button {
padding: 9px 25px;
background-color: rgba(0, 139, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 139, 169, 0.8);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<img class="header_logo" src="./youtube_logo.png" alt="youtube's logo" width="5%" height="5%">
<nav=c lass="navbar">
<ul class="nav_links">
<li>SERVICE</li>
<li>STORE</li>
<li>CONTACT</li>
<li>MORE</li>
</ul>
</nav>
<a class="social_buttion" href="#"><button>SOCIAL</button></a>
</header>
<section class="section1">
<img class="page_logo1" src="./2f606ad14bf9171e5f41b42a01b4441f.jpg">
<div class="centered">
this is center
</section>
</div>
<div class="section2">
<img class="page_logo2" src="./2f606ad14bf9171e5f41b42a01b4441f.jpg">
</div>
</body>
</html>
Use a positive z-index value for header
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
/* padding-top: 100px; */
}
.section1 {
/* position: sticky; */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
text-align: center;
color: blueviolet;
}
.section1 img {
/* position: sticky; */
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
position: relative;
text-align: center;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
li,
a,
button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
}
header {
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
z-index: 1;
}
.header_logo {
cursor: pointer;
margin-left: -70px;
}
.nav_links {
list-style-type: none;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0s;
}
.nav_links li a:hover {
color: #0088a9;
}
button {
padding: 9px 25px;
background-color: rgba(0, 139, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 139, 169, 0.8);
}
<header>
<img class="header_logo" src="https://via.placeholder.com/200" alt="youtube's logo" width="5%" height="5%">
<nav=c lass="navbar">
<ul class="nav_links">
<li>SERVICE</li>
<li>STORE</li>
<li>CONTACT</li>
<li>MORE</li>
</ul>
</nav>
<a class="social_buttion" href="#"><button>SOCIAL</button></a>
</header>
<section class="section1">
<img class="page_logo1" src="https://via.placeholder.com/200">
<div class="centered">
this is center
</section>
</div>
<div class="section2">
<img class="page_logo2" src="https://via.placeholder.com/200">
</div>
This question already has answers here:
How do I give text or an image a transparent background using CSS?
(29 answers)
Closed 2 years ago.
I have spent hours on this wasteful exercise. I am unable to set the color of text over the image to be perfect white. It takes on the color of what's behind it.
Please take a look.
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#100;300;400;700;900&display=swap');
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
overflow-x: auto;
overflow-y: scroll;
font-family: 'Lato';
}
header {
background-color: #e8e9ea;
padding: 10px 0;
}
.nav-container {
width: 85%;
margin: 0 auto;
}
nav {
margin: 30px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-top {
margin: 15px 0;
}
.nav-brand {
font-size: 1.8rem;
font-weight: 300;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
margin: 0 8px;
font-size: 14px;
font-weight: 300;
}
li a {
text-decoration: none;
color: black;
}
.container {
width: 85%;
margin: 0 auto;
}
.mb_parallax_container {
margin-top: 100px;
height: 100vh;
width: 100%;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-image: url(https://i.ibb.co/q50nfZ1/Woman-visiting-psychologist-office-Patient-sitting-in-armchair-and-talking-to-psychiatrist-Vector-il.jpg);
background-position: center;
position: relative;
z-index: 1;
}
.mb_parallax_overlay {
height: 100vh;
width: 100%;
background-color: black;
opacity: .4;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
}
.mb_parallax_caption {
text-align: center;
width: 70%;
position: relative;
z-index: 3;
opacity: 1;
-webkit-user-select: none;
/* Chrome all / Safari all */
-moz-user-select: none;
/* Firefox all */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
}
.mb_parallax_caption h1 {
font-size: 5.5rem;
color: white;
margin: 20px 0;
}
.mb_parallax_caption p {
margin: 20px 0;
color: white;
font-size: 1.6rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<div class="nav-container">
<div class="nav-top"></div>
<hr>
<nav>
<h3 class="nav-brand">Hello Therapy</h3>
<ul>
<li>Home</li>
<li>Therapist Repository</li>
<li>Crisis Intervention</li>
<li>Resources</li>
<li>Join Us</li>
<li>About</li>
<li>Blog</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="mb_parallax_container" id="mb_parallax_one">
<div class="mb_parallax_overlay">
<div class="mb_parallax_caption">
<h1>Welcome to Hello Therapy</h1>
<p>Making Therapy Accessible</p>
</div>
</div>
</div>
</div>
</body>
</html>
It would be great if someone could find a work around. Thanks in advance.
You have opacity: 0.4 set on .mb_parallax_overlay which means, all children are darkened as well. In this case if you have 0.4 on your parent, then the maximum opacity of the child is 0.4 (opacity: 1 for the child).
You can try the following approach to darken your background.
.container {
width: 85%;
margin: 0 auto;
}
.mb_parallax_container {
margin-top: 100px;
height: 100vh;
width: 100%;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-image: url(https://i.ibb.co/q50nfZ1/Woman-visiting-psychologist-office-Patient-sitting-in-armchair-and-talking-to-psychiatrist-Vector-il.jpg);
background-position: center;
position: relative;
z-index: 1;
}
.mb_parallax_overlay {
height: 100vh;
width: 100%;
background-color: black;
/*opacity: .4; remove this*/
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
background: rgba(0, 0, 0, 0.5);
/*darken background*/
}
.mb_parallax_caption {
text-align: center;
width: 70%;
position: relative;
z-index: 3;
/*opacity: 1; not needed*/
-webkit-user-select: none;
/* Chrome all / Safari all */
-moz-user-select: none;
/* Firefox all */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
}
.mb_parallax_caption h1 {
font-size: 5.5rem;
color: white;
margin: 20px 0;
}
.mb_parallax_caption p {
margin: 20px 0;
color: white;
font-size: 1.6rem;
}
<div class="container">
<div class="mb_parallax_container" id="mb_parallax_one">
<div class="mb_parallax_overlay">
<div class="mb_parallax_caption">
<h1>Welcome to Hello Therapy</h1>
<p>Making Therapy Accessible</p>
</div>
</div>
</div>
</div>
How can I increase the width of an element in HTML when someone hover on that element.
I wrote some code for that animation using CSS but I am not getting the expected result.
Here's what I am getting when I hover on that element:-
image.gif
Here's what I want:-
image
here is my code:-
HTML:-
<!DOCTYPE html>
<html>
<head>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="animations/index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main-wrapper">
<header> </header>
<div><nav>
<ul id="navul01">
<li><a class="active" href="#home">Home</a></li>
<li>blog</li>
<li>subjects</li>
<li>contacts</li>
</ul>
</nav></div>
</div>
<div>
<ul id="space">
<li><a></a></li>
</ul>
</div>
<div>
<ul id="subjects_nav">
<li><a id="physics_image" href="#home">PHYSICS</a></li>
<li><a id="chemistry_image" href="#news">CHEMISTRY</a></li>
<li><a id="maths_image" href="#contact">MATHS</a></li>
</ul>
</div>
</body>
</html>
CSS:-
header {
width:100%;
height:350px;
position:relative;
overflow:hidden;
z-index:-1;
border:3px solid grey;
background-position: center center;
display: flex;
background-image:url("../images/index/header/header.jpg");
background-size: cover;
}
.main-wrapper {
position: relative;
}
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
bottom: 0;
}
#navul01 li {
float: left;
}
#navul01 li a {
display: block;
color: white;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 14px 16px;
font-size: 25px;
text-decoration: none;
border:2px solid white;
}
#navul01 li a:hover {
background-color: lightgreen;
}
#subjects_nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
left: 10%;
width: 80%;
}
#subjects_nav li {
float: center;
}
#subjects_nav li a {
display: block;
color: white;
font-size: 5vw;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 50px 50px;
text-decoration: none;
border:3px solid white;
}
#subjects_nav li a:hover {
animation-name: subject_animation;
animation-duration: 1s;
}
#physics_image {
background-position: center center;
display: flex;
background-image:url("../images/index/subjects/physics.jpg");
background-size: cover;
}
#chemistry_image {
background-position: center center;
display: flex;
background-image:url("../images/index/subjects/chemistry.jpg");
background-size: cover;
}
#maths_image {
background-position: center center;
display: flex;
background-image:url("../images/index/subjects/maths.jpg");
background-size: cover;
}
#space {
list-style: none;
}
(ANIMATION) CSS :-
#keyframes subject_animation {
from {
width: 80%;
}
to {
width: 90%;
}
UPDATE - 1:-
i used this code in CSS transform: scale(1.2, 1); but it stretch the images and make them look ugly and i only want transformation in x-axis so i used transform: scaleX(1.4); this also stretch the image
Think differently and instead of changing the width change the margin to make them negative values. You can also use transition instead of animation:
By the way there is no float:center, you need to correct this on your code.
Here is the relevant part of the code to show the result:
#subjects_nav {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
left: 10%;
width: 80%;
}
#subjects_nav li a {
display: block;
color: white;
font-size: 5vw;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 50px 50px;
text-decoration: none;
border: 3px solid white;
transition: 1s;
}
#subjects_nav li a:hover {
margin: 0 -30px;
}
#physics_image {
background-position: center center;
display: flex;
background-image: url("https://lorempixel.com/1000/1000/");
background-size: cover;
}
#chemistry_image {
background-position: center center;
display: flex;
background-image: url("https://lorempixel.com/800/1000/");
background-size: cover;
}
#maths_image {
background-position: center center;
display: flex;
background-image: url("https://lorempixel.com/1000/600/");
background-size: cover;
}
#space {
list-style: none;
}
<ul id="subjects_nav">
<li><a id="physics_image" href="#home">PHYSICS</a></li>
<li><a id="chemistry_image" href="#news">CHEMISTRY</a></li>
<li><a id="maths_image" href="#contact">MATHS</a></li>
</ul>
i wrote a code for my navigation bar to stay at fixed position using position: fixed;so that when anybody tried to scroll the page it stay at their current position but i am not getting the desired result.
here is my navigation bar (without changing code):-
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
bottom: 0;
}
but when i add position: fixed; in my coding like :-
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
bottom: 0;
position: fixed;
}
my navigation bar moves to bottom of the page:-
but if i remove bottom: 0; from my code:-
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
}
or
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
position: fixed;
}
in both the cases my navigation bar moves to this position:-
and also i cannot remove position: absolute; from my code as it also changes the position of my navigation bar:-
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
right: 0;
}
what i want ?:-
here is my code:-
header {
width:100%;
height:350px;
position:relative;
overflow:hidden;
z-index:-1;
border:3px solid grey;
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
.main-wrapper {
position: relative;
}
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
bottom: 0;
}
#navul01 li {
float: left;
}
#navul01 li a {
display: block;
color: white;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 14px 16px;
font-size: 25px;
text-decoration: none;
border:2px solid white;
}
#navul01 li a:hover {
background-color: lightgreen;
}
#subjects_nav {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
left: 10%;
width: 80%;
}
#subjects_nav li a {
display: block;
color: white;
font-size: 5vw;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 50px 50px;
text-decoration: none;
border:3px solid white;
transition: 1s;
}
#subjects_nav li a:hover {
margin: 0 -5%;
}
#physics_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#chemistry_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#maths_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#space {
list-style: none;
}
<!DOCTYPE html>
<html>
<head>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main-wrapper">
<header> </header>
<div><nav>
<ul id="navul01">
<li>Home</li>
<li>blog</li>
<li>contacts</li>
</ul>
</nav></div>
</div>
<div>
<ul id="space">
<li><a></a></li>
</ul>
</div>
<div>
<ul id="subjects_nav">
<li><a id="physics_image" href="#home">PHYSICS</a></li>
<li><a id="chemistry_image" href="pages\chemistry\chemistry.html">CHEMISTRY</a></li>
<li><a id="maths_image" href="#contact">MATHS</a></li>
</ul>
</div>
</body>
</html>
Use fixed, z-index and calculate the postion using top and not bottom. The value should be the height of the header minus the height of the navbar:
run the snippet full width as it won't work on the reduced size since the header is big
header {
width:100%;
height:350px;
position:relative;
overflow:hidden;
z-index:-1;
border:3px solid grey;
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
.main-wrapper {
position: relative;
}
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: fixed;
right: 0;
top: 300px;
z-index:999;
}
#navul01 li {
float: left;
}
#navul01 li a {
display: block;
color: white;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 14px 16px;
font-size: 25px;
text-decoration: none;
border:2px solid white;
}
#navul01 li a:hover {
background-color: lightgreen;
}
#subjects_nav {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
left: 10%;
width: 80%;
}
#subjects_nav li a {
display: block;
color: white;
font-size: 5vw;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 50px 50px;
text-decoration: none;
border:3px solid white;
transition: 1s;
}
#subjects_nav li a:hover {
margin: 0 -5%;
}
#physics_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#chemistry_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#maths_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#space {
list-style: none;
}
<!DOCTYPE html>
<html>
<head>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main-wrapper">
<header> </header>
<div><nav>
<ul id="navul01">
<li>Home</li>
<li>blog</li>
<li>contacts</li>
</ul>
</nav></div>
</div>
<div>
<ul id="space">
<li><a></a></li>
</ul>
</div>
<div>
<ul id="subjects_nav">
<li><a id="physics_image" href="#home">PHYSICS</a></li>
<li><a id="chemistry_image" href="pages\chemistry\chemistry.html">CHEMISTRY</a></li>
<li><a id="maths_image" href="#contact">MATHS</a></li>
</ul>
</div>
</body>
</html>