After the slideIn animation the buttons don't set the cursor to pointer and don't do anything that was coded in the :hover/:active.
My goal is to have the button effects after the animation.
here is an example where the button effects don't work after the animation:
div{
display: block;
}
.content{
position: absolute;
background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1{
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 200%;
}
ul{
padding: 0px;
list-style: none;
}
.btn{
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
color: white;
transition: 0.1s;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}
#btn1{
opacity: 0;
animation: slideIn 1.5s 2s 1 ease-out forwards;
}
.btn:hover{
transform: translateY(-2px);
transition: 0.3s;
}
.btn:active{
transform: scale(0.95);
}
span{
font-size: 32px;
display: inline-block;
}
#keyframes slideIn {
0% {
opacity: 1;
transform: translateX(-900px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br/> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<button id="btn1" class="btn">
<span>
1300000
</span>
</button>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
Here is an example without animation where the button effects do work:
body{
background-image: url("../img/bg.png");
background-repeat: no-repeat;
background-size: 100%;
}
div{
display: block;
}
.content{
position: absolute;
background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1{
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 200%;
}
ul{
padding: 0px;
list-style: none;
}
.btn{
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
color: white;
transition: 0.1s;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}
.btn:hover{
transform: translateY(-2px);
transition: 0.3s;
}
.btn:active{
transform: scale(0.95);
}
span{
font-size: 32px;
display: inline-block;
}
<?xml version="1.0" encoding="UTF-8"?>
<!--
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/XHtml.xhtml to edit this template
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br/> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<button id="btn1" class="btn">
<span>
1300000
</span>
</button>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
Okay so a few problems here. You are trying to animate transform properties on hover and with the animation property.
The way I would solve this is by adding a container to the button where you would add the intro animation. Then add the hover animation to the button.
here's the HTML
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br /> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<div class="button-container">
<button class="btn">
<span>
1300000
</span>
</button>
</div>
</a>
</li>
</ul>
</div>
</section>
and then CSS
.content {
position: absolute;
background: linear-gradient(-45deg, #2e3192, #1bffff);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1 {
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 200%;
}
ul {
padding: 0px;
list-style: none;
}
.button-container {
animation: slideIn 1.5s 1 ease-out forwards;
}
.btn {
position: relative;
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
transition: transform 0.1s;
color: white;
cursor: pointer;
}
.btn:hover {
transform: translateY(-2px);
transition-duration: 0.3s;
}
.btn:active {
transform: scale(0.95);
}
span {
font-size: 32px;
display: inline-block;
}
#keyframes slideIn {
0% {
opacity: 0;
transform: translateX(-900px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
Apply display: block; to the a tag around the button to make the whole button surface be a link:
div{
display: block;
}
.content{
position: absolute;
background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1{
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 200%;
}
ul{
padding: 0px;
list-style: none;
}
.btn{
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
color: white;
transition: 0.1s;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}
#btn1{
opacity: 0;
animation: slideIn 1.5s 2s 1 ease-out forwards;
}
.btn:hover{
transform: translateY(-2px);
transition: 0.3s;
}
.btn:active{
transform: scale(0.95);
}
span{
font-size: 32px;
display: inline-block;
}
#keyframes slideIn {
0% {
opacity: 1;
transform: translateX(-900px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#questions a {
display: block;
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br/> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<button id="btn1" class="btn">
<span>
1300000
</span>
</button>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
Updated answer (works with 2s delay):
Remove the transform: translateX(0) from the 100% keyframe on the animation. It's unnecessary, and it's overriding the :hover animation.
Old answer:.
(I changed the animation-fill-mode to none, and moved the opacity: 0 to the #keyframes). The problem was that the transform on the :hover was being overridden by the #keyframes, so changing the fill-mode fixed that.
div{
display: block;
}
.content{
position: absolute;
background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1{
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 200%;
}
ul{
padding: 0px;
list-style: none;
}
.btn{
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
color: white;
transition: 0.1s;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}
#btn1{
opacity: 0;
animation: slideIn 1.5s 2s 1 ease-out forwards;
}
.btn:hover{
transform: translateY(-2px);
transition: 0.3s;
}
.btn:active{
transform: scale(0.95);
}
span{
font-size: 32px;
display: inline-block;
}
#keyframes slideIn {
0% {
opacity: 1;
transform: translateX(-900px);
}
100% {
opacity: 1;
}
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br/> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<button id="btn1" class="btn">
<span>
1300000
</span>
</button>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
Related
The background appears but after 5 seconds authorization appears
first the circle will appear smoothly and slowly, then the authorization window should appear in this video https://www.youtube.com/watch?v=16j4MkPrI1Y&t=1s
searched all over the internet and couldn't find anything
Maybe I forgot the form somewhere, please help
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
input {
height: 45px;
width: 100%;
color: #385983;
font-size: 14px;
line-height: 16px;
border: 2px solid #E9F2FF;
border-radius: 5px;
padding-left: 25px;
}
input:focus {
outline: none;
border: 2px solid #C1D9FD;
}
main {
background: #F1F5FE;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.circle {
position: absolute;
z-index: 1;
width: 2534px;
height: 2534px;
border-radius: 50%;
background: #F7FAFF;
box-shadow: 0px 4px 70px 6px rgba(217, 229, 255, 0.25);
animation-name: fadeCircle;
animation-direction: .7s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeCircle {
0% {
width: 2534px;
height: 2534px;
}
25% {
width: 2000px;
height: 2000px;
}
50% {
width: 1500px;
height: 1500px;
}
75% {
width: 1000px;
height: 1000px;
}
100% {
width: 534px;
height: 534px;
}
}
.register-form-container {
opacity: 0;
position: relative;
z-index: 2;
max-width: 415px;
width: 100%;
background: #FFFFF;
box-shadow: 0px 6px 50px rgba(217, 229, 225, 0.7);
border-radius: 20px;
padding-left: 30px;
padding-right: 30px;
padding-top: 38px;
padding-bottom: 38px;
animation-name: fadeForm;
animation-direction: .7s;
animation-timing-function: ease-in-out;
animation-delay: 1.4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeForm {
0% {
opacity: 0;
}
25% {
opacity: .25;
}
50% {
opacity: .5;
}
75% {
opacity: .75;
}
100% {
opacity: 1;
}
}
.form-title {
color: #30507D;
font-weight: 500;
font-size: 20px;
line-height: 23px;
margin-bottom: 38px;
}
.form-field {
margin-bottom: 13px;
}
.button {
font-weight: bold;
font-size: 14px;
display: block;
height: 45px;
background: #247FFF;
border-radius: 5px;
color: #fff;
text-transform: uppercase;
text-align: center;
line-height: 45px;
cursor: pointer;
}
.button:hover {
background-color: #0D6CF2;
}
a.button {
text-decoration: none;
}
.button-google {
color: #C6CFDC;
background: #F2F6FF;
}
.button-google:hover {
background: #E2E6F0;
color: #fff
}
.divider {
font-weight: 500;
font-size: 12px;
line-height: 14px;
color: #405D87;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>book.py</title>
</head>
<body>
<main>
<div class="circle"></div>
<div class="register-form-container">
<h1 class="form-title">
Регистрация
</h1>
<div class="form-flield">
<div class="form-flield">
<input type="text" placeholder="Имя">
</div>
<div class="form-flield">
<input type="text" placeholder="Почта">
</div>
<div class="form-flield">
<input type="text" placeholder="Пароль">
</div>
<div class="form-flield">
<input type="text" placeholder="Подтвердить Пароль">
</div>
</div>
<div class="form-buttons">
<buttton class="button">Регистрация</buttton>
<div class="divider">или</div>
Google
</div>
</div>
</main>
</body>
</html>
I wrote up an animation in which the banner elements will show up on the screen smoothly from the bottom up. The elements should also rotate slightly as they go up the screen. To accomplish that I added a transition property with value of translateY() rotateY(). Unfortunately, while translateY() works just fine, rotateY() does not. I've no idea why. Plz help me fix this issue. Regards.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Starter</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght#400;500;600;700;800&family=Josefin+Slab:ital,wght#0,300;0,400;1,200;1,300;1,400&family=Mulish:ital,wght#0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
<link
rel="stylesheet"
href="stylesheet.css"
/>
</head>
<body>
<div class="container">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<header class="header">
<div class="img-wrapper">
<img src="bg.jpg">
</div>
<div class="banner">
<h1>Architecture & Interior Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<button>Discover now</button>
</div>
</header>
</div>
<script src="test3.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
html{
font-size: 62.5%;
}
.hamburger-menu{
width: 3rem;
height: 3rem;
position: fixed;
top: 5rem;
right: 5rem;
height: 5rem;
z-index: 200;
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
}
.line{
width: 100%;
height: 0.2rem;
background-color: #fff;
box-shadow: 0 0.1rem .2rem rgba(0, 0, 0, 0.2);
}
.header{
width: 100%;
height: 100vh;
position: relative;
perspective: 100rem;
overflow: hidden;
}
.img-wrapper{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0 , .8);
overflow: hidden;
}
.img-wrapper img{
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
animation: scale 25s;
}
#keyframes scale{
0%{
transform: scale(1.3);
}
100%{
transform: scale(1);
}
}
.banner{
position: absolute;
top: 30%;
left: 15%;
}
.banner h1{
font-family: "Baloo Da 2", serif;
font-size: 8rem;
font-weight: 300;
color: #fff;
width: 50%;
line-height: 9rem;
letter-spacing: .2rem;
text-shadow: 0.3rem .5rem rgba(0, 0, 0, 0.4);
opacity: 0;
animation: moveBanner 1s 0.5s forwards;
}
.banner p{
font-family: "Josefin Slab", serif;
font-size: 4rem;
color: #fff;
width: 70%;
letter-spacing: 0.1rem;
margin-bottom: 3rem;
text-shadow: 0.3rem .5rem rgba(0, 0, 0, 0.4);
opacity: 0;
animation: moveBanner 1s 0.7s forwards;
}
.banner button{
width: 25rem;
height: 7rem;
background-color: #c29525;
border: none;
font-family: "Muli", serif;
font-size: 2rem;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0.2rem .4rem rgba(0, 0, 0, 0.2);
text-shadow: 0 0.3rem .5rem rgba(0, 0, 0, 0.4);
cursor: pointer;
opacity: 0;
animation: moveBanner 1s 0.9s forwards;
}
#keyframes moveBanner{
0%{
transform: translateY(40rem) rotateY(-20deg);
}
100%{
transform: translateY(0) rotateY(0);
opacity: 1;
}
}
rotateY rotates about the Y axis. So unless you introduce 3d aspects to the CSS nothing will seem to happen.
I think you require rotation about the Z axis, that is, the axis that is coming straight out of the screen.
div {
width: 300px;
height: 100px;
background: green;
transform: rotateZ(-45deg);
}
<div></div>
I found the solution. Just add a perspective of 100rem to the parent div.
.banner{
position: absolute;
top: 30%;
left: 15%;
perspective: 100rem;
}
I'm trying to add a background image to my timeline on a website, but I can't seem to move my background image up and down without it shrinking. It almost seems like there's some invisible bar keeping me from moving the image up. If it moves up, it just shrinks.
edit: Sorry for the confusion. I am wanting to move the image up in the background of the timeline. I can't move it up using top.
Initially I couldn't even get the image to show up, but now I need to use the
background-image: cover
property and it's not working as expected. I'm doing something wrong.
What I've tried:
adjusting the height and width of my elements
using Top to move the background image up/down
Here's the code for the timeline and it's styling sheets:
html {
font-size: 10px;
font-family: Raleway;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
font-weight: normal;
}
h1 {
font-family: Raleway;
padding: 20px;
font-size: 53px;
text-shadow: 2px 2px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li {
float: left;
padding-right: 30px;
}
li a {
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
}
li a:hover {
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul {
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
right: 23px;
width: 100%;
}
h2 {
text-align: center;
font-size: 25px;
}
h2 p {
font-size: 18px;
}
.right-button {
float: right;
padding-right: 47px
}
.other-button {
float: right;
padding-right: 30px;
}
#timeline {
font-family: tahoma;
font-size: 15px;
line-height: 1.75;
padding: 0;
margin-left: 400px;
height: 400px;
width: 650px;
display: flex;
background-color: #031625;
}
.t1-item:before,
.t1-item:after {
transform: translate3d(0, 0, 0);
content: ' ';
position: absolute;
left: 0;
top: 0;
}
.t1-item {
padding: 25px;
transform: translate3d(0, 0, 0);
position: relative;
width: 25%;
margin-top: 20rem;
color: white;
overflow: hidden;
transition: width 0.5s ease;
}
.t1-item:after {
background: rgba(3, 22, 37, 0.85);
opacity: 1;
transition: opacity .5s ease;
}
.t1-item:before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 75%);
z-index: 1;
opacity: 0;
transform: translate3d(0, 0, 0) translateY(50%);
transition: opacity .5s ease, transform .5s ease;
}
.t1-item:hover {
width: 30%;
}
.t1-item:hover:after {
opacity: 0;
}
.t1-item:hover:before {
opacity: 1;
transform: translate3d(0, 0, 0) translateY(0);
transition: opacity 1s ease, transform 1s ease .25s;
}
.t1-item:hover .t1-content {
opacity: 1;
transform: translateY(0);
transition: all .75s ease .5s;
}
.t1-item:hover .t1-bg {
filter: grayscale(0);
}
.t1-content {
transform: translate3d(0, 0, 0) translateY(25px);
position: relative;
z-index: 1;
text-align: center;
margin: 0.1618em;
top: 55%;
opacity: 0%;
}
.t1-content h3 {
font-family: tahoma;
text-transform: uppercase;
color: #1779cf;
font-size: 1.44rem;
font-weight: normal;
}
.t1-year {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.t1-year p {
font-family: tahoma;
font-size: 1.628rem;
line-height: 0;
}
.t1-bg {
transform: translate3d(0, 0, 0);
position: absolute;
left: 0;
top: 0px;
background-size: cover;
background-position: center center;
transition: filter .5se ease;
filter: grayscale(100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Isabelle Kreienbrink </h1>
<ul>
<li>Resume</li>
<li>Academics</li>
<li>Projects</li>
<li class="right-button">Contact Info</li>
<li class="other-button">Test</li>
<li class="other-button">Testing</li>
</ul>
<h2> Welcome to my website!
<p> I hope you learn a little about me while you're here. </p>
</h2>
<section id="timeline">
<div class="t1-item">
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg); height: 100%; width: 100%;">
</div>
<div class="t1-year">
<p class="f2 heading">2014</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg) height: 100%, width: 100%"></div>
<div class="t1-year">
<p class="f2 heading">2015</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(001.jpeg)"></div>
<div class="t1-year">
<p class="f2 heading">2016</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
</section>
</body>
</html>
I'm trying to put a timeline on my website but can't seem to get my background image to show up.
What I've tried:
checking the path of my image
matching the height of my divs/HTML elements to make sure the image is covering the right height
made sure I put background-image in my HTML tags
tried using a negative value for top to move the image around - didn't work
I also tried deleting my other styling elements and adding them back in to see if they were causing it. I'm not quite sure where I'm going wrong.
The CSS element I'm wrestling with is called t1-bg (located at bottom of CSS sheet) - here is my code:
(run the snippet in a full window for a proper overview)
html {
font-size: 10px;
font-family: Raleway;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
font-weight: normal;
}
h1 {
font-family: Raleway;
padding: 20px;
font-size: 53px;
text-shadow: 2px 2px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li {
float: left;
padding-right: 30px;
}
li a {
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
}
li a:hover {
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul {
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
right: 23px;
width: 100%;
}
h2 {
text-align: center;
font-size: 25px;
}
h2 p {
font-size: 18px;
}
.right-button {
float: right;
padding-right: 47px
}
.other-button {
float: right;
padding-right: 30px;
}
#timeline {
font-family: tahoma;
font-size: 15px;
line-height: 1.75;
padding: 0;
margin-left: 400px;
height: 400px;
width: 650px;
display: flex;
background-color: #031625;
}
.t1-item:before,
.t1-item:after {
transform: translate3d(0, 0, 0);
content: ' ';
position: absolute;
left: 0;
top: 0;
}
.t1-item {
padding: 25px;
transform: translate3d(0, 0, 0);
position: relative;
width: 25%;
margin-top: 20rem;
color: white;
overflow: hidden;
transition: width 0.5s ease;
}
.t1-item:after {
background: rgba(3, 22, 37, 0.85);
opacity: 1;
transition: opacity .5s ease;
}
.t1-item:before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 75%);
z-index: 1;
opacity: 0;
transform: translate3d(0, 0, 0) translateY(50%);
transition: opacity .5s ease, transform .5s ease;
}
.t1-item:hover {
width: 30%;
}
.t1-item:hover:after {
opacity: 0;
}
.t1-item:hover:before {
opacity: 1;
transform: translate3d(0, 0, 0) translateY(0);
transition: opacity 1s ease, transform 1s ease .25s;
}
.t1-item:hover .t1-content {
opacity: 1;
transform: translateY(0);
transition: all .75s ease .5s;
}
.t1-item:hover .t1-bg {
filter: grayscale(0);
}
.t1-content {
transform: translate3d(0, 0, 0) translateY(25px);
position: relative;
z-index: 1;
text-align: center;
margin: 0.1618em;
top: 55%;
opacity: 0%;
}
.t1-content h3 {
font-family: tahoma;
text-transform: uppercase;
color: #1779cf;
font-size: 1.44rem;
font-weight: normal;
}
.t1-year {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.t1-year p {
font-family: tahoma;
font-size: 1.628rem;
line-height: 0;
}
.t1-bg {
transform: translate3d(0, 0, 0);
position: absolute;
left: 0;
background-size: cover;
background-position: center center;
transition: filter .5se ease;
filter: grayscale(100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Isabelle Kreienbrink </h1>
<ul>
<li>Resume</li>
<li>Academics</li>
<li>Projects</li>
<li class="right-button">Contact Info</li>
<li class="other-button">Test</li>
<li class="other-button">Testing</li>
</ul>
<h2> Welcome to my website!
<p> I hope you learn a little about me while you're here. </p>
</h2>
<section id="timeline">
<div class="t1-item">
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg)">
</div>
<div class="t1-year">
<p class="f2 heading">2014</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg)"></div>
<div class="t1-year">
<p class="f2 heading">2015</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(001.jpeg)"></div>
<div class="t1-year">
<p class="f2 heading">2016</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
</section>
</body>
</html>
As someone mentioned in a comment on your question, you have no height set on your div. It does in fact have no content. A css background image does not count as content in the html. You can easily prove this by creating a simple html file with just your div in it. If you do the following, there will be no image:
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg)"></div>
Add height and width and the image will appear:
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg); height: 100%; width: 100%"></div>
I am new html css,I am pretty confused with notification bar this should be responsive to adopt full screen when it is in mobile.But I tried it is not expanding .
But for me it is not working
HTML Markup
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/InterestPage.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<header>
<div class="innerwrapper">
<h1>Feel Hunt</h1>
<div class="otherOptions">
<div class="notificationdiv">
<div class="notifyCoun">
<p>3</p>
</div>
<svg style="enable-background:new 0 0 48 48;" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
.st0{display:none;}
.st1{fill:none;stroke:#303030;stroke-width:0.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#303030;}
</style><g class="st0" id="Padding__x26__Artboard"/><g id="Icons"><g><path class="st1" d="M12.44998,29.25c0.4714-1.86041,0.98683-3.71044,1.39399-5.58655 c0.20076-0.92508,0.37522-1.85624,0.50479-2.79409c0.12749-0.92277,0.12761-1.86938,0.32255-2.78069 c0.17715-0.82819,0.41986-1.62416,0.79385-2.38678c0.72808-1.48468,1.84795-2.76857,3.21698-3.69551 c1.54611-1.04685,3.39019-1.61638,5.25786-1.61638c2.6,0,4.96,1.06,6.66999,2.76999 c1.1685,1.1685,1.95078,2.64423,2.40368,4.22483c0.48483,1.69205,0.49984,3.44094,0.81387,5.16177 c0.41544,2.27656,1.13475,4.46739,1.71247,6.7034"/><path class="st1" d="M36.75998,35.78003H11.24002c-0.35004,0-0.60004-0.33002-0.5-0.67004L12.44998,29.25h23.09003 l1.71997,5.85999C37.36002,35.45001,37.11002,35.78003,36.75998,35.78003z"/><path class="st1" d="M22.39999,35.86509V36.32c0,0.71,0.58,1.29,1.29,1.29h0.93c0.71,0,1.29-0.58,1.29-1.29v-0.43993"/><path class="st1" d="M21.00458,13.27578c-1.74433,0.9948-3.03389,2.64047-3.76966,4.84763"/><line class="st1" x1="16.98094" x2="16.84722" y1="20.13664" y2="21.16766"/></g></g></svg>
//this is notifcation panel DIV
<div class="notificationPanel">
this should be full screen
</div>
</div>
<div class="profilePicDrop">
<img src="./img/sky-night-space-trees%20(4).jpeg" alt="">
<div class="getDisplayNone dropDown">
vdvdv
</div>
</div>
</div>
</div>
</header>
</body>
</html>
Homepage.scss
#import "utils/_reset";
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400');
#import "utils/_variables";
body{
background: #EEEEEE;
}
header{
width: 100%;
position: fixed;
height:50px;
top:0;
left:0;
right: 0;
background: #ffffff;
box-shadow: 0px 11px 32px -1px rgba(0,0,0,.04);
.innerwrapper{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 75%;
margin: 0 auto;
}
h1{
color: #393e46;
font-family: $FontStyle;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 400;
a{
padding: 5px;
border: 1px solid #393e46;
text-decoration: none;
color: #393e46;
font-size: 13px;
transition: all 100ms ease-in-out;
&:hover{
background:#393e46 ;
color: #ffffff;
}
}
}
.otherOptions{
margin-left: auto;
display: flex;
align-items: center;
.profilePicDrop{
width: 25px;
height:25px;
position: relative;
margin-left: 12px;
img{
width: 25px;
height:25px;
border-radius: 50px;
}
.dropDown{
width: 150px;
height:150px;
background: #ffffff;
position: absolute;
right: 5px;
top:35px;
border-radius: 5px;
box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.1);
}
}
}
}
.getDisplayNone{
display: none;
}
.getDropMenuIn{
animation: PopIn;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.getOutDropMenu{
animation: PopOut;
animation-duration: .3s;
animation-fill-mode: forwards;
}
.notificationdiv{
margin-top: 5px;
position: relative;
svg{
width: 30px;
height:30px;
}
.notifyCoun{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: #E74C3C;
width: 17.5px;
height:17.5px;
border-radius: 50px;
box-shadow: 0px 4px 14px 0px rgba(231,77,60,0.3);
p{
font-size: 12px;
font-family: $FontStyle;
color: #ffffff;
font-weight: 300;
}
}
&:hover{
cursor: pointer;
}
}
//this is notification panel css
.notificationPanel{
position: absolute;
top: 50px;
left: 0;
right: 0;
background: #ffffff;
width: 100%;
}
#keyframes PopIn {
from{
transform: scale(0.8);
opacity: 0.5;
transform-origin: 150px -5px;
}to{
transform: scale(1);
opacity: 1;
visibility: visible;
}
}
#keyframes PopOut {
from{
opacity: 1;
}to{
opacity: 0.1;
visibility: hidden;
transform: scale(0.5);
transform-origin: 150px -5px;
}
}
Try removing position: relative from your .notificationdiv. Because your absolute element will take 100% of his first relative parent.
https://codepen.io/OliviaPaquay/pen/mwbQEj Demo here, remove line 10.