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;
}
Related
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>
Let me preface my question with this: I'm a total beginner.I'm really sorry for the long code snippets and code.
I'm trying to make this "Header"/ "Banner" (see code) show everything inside them but by using "overflow: hidden", elements inside the "Header"/ "Banner" get cropped out.
Example: If I try to move my Button outside of these parameters that I obviously have set (without me knowing) it gets cropped out. I want to have more space between the text lines and the button without it getting cropped.
I just don't know to make it all visible even if I change the position of the button, like in the example.
I am at a loss, I tried changing every variable possible. This is probably obvious but I just can't seem to make my idea work.
/* default margin and padding for all elements */
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
/* decrese font size of the HTML file */
html {
font-size: 62.5%;
}
/* Creating & styling hamburger menu */
.hamburger-menu {
width: 3rem;
height: 3rem;
position: fixed;
top: 5rem;
right: 3rem;
z-index: 200;
/* create lines for menu */
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
}
.line {
width: 100%;
height: 0.2rem;
background-color: #FFF;
box-shadow: 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
}
/* Costomize header */
.header {
width: 100%;
height: 100vh;
/*Header: parent of banner--> set position to relative */
position: relative;
}
/* Banner styling */
.banner {
position: absolute;
top: 20%;
left: 5%;
perspective: 300rem;
overflow: hidden;
}
/* Styling h1 & h2 for banner */
.banner h1 {
font-family: Lobster Two, serif;
font-size: 8rem;
font-weight: 300;
color: darkred;
text-shadow: 0.3rem 0.4rem rgba(0, 0, 0, 0.8);
width: 100%;
opacity: 0;
animation: moveBanner 1s .7s forwards;
}
.banner1 h2 {
font-family: 'Lobster Two', serif;
font-size: 6rem;
font-weight: 300;
color: #FFF;
text-shadow: 0.2rem 0.3rem rgba(0, 0, 0, 0.8);
width: 100%;
opacity: 0;
animation: moveBanner 1s .7s forwards;
}
/* Paragraph styling for banner*/
.banner p {
font-family: 'Mulish', serif;
font-size: 4rem;
font-size: 700;
color: #FFF;
text-shadow: 0.2rem 0.3rem rgba(0, 0, 0, 1);
opacity: 0;
animation: moveBanner 1s .7s forwards;
}
/* Styling Button */
.banner .btn button {
width: 25rem;
height: 7rem;
background-color: darkred;
border: none;
font-family: 'Josefin Slab', serif;
font-size: 2rem;
font-weight: 700;
text-transform: uppercase;
color: #FFF;
text-shadow: 0.2rem 0.3rem rgba(0, 0, 0, 0.5);
box-shadow: 0.3rem 0.5rem rgba(0, 0, 0, 0.4);
cursor: pointer;
opacity: 0;
animation: moveBanner 1s .9s forwards;
}
/* Banner animation */
#keyframes moveBanner {
0% {
transform: translateY(40rem) rotateY(-20deg);
}
100% {
transform: translateY(0) rotateY(0);
opacity: 1;
}
}
<body>
<div class="container">
<!-- Menu style with 3 lines -> hamburger -->
<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="images/houses.jpg">
</div>
<div class="banner">
<h1>Red String</h1>
<div class="banner1">
<h2>Blah blah blah</h2>
</div>
<p>I dont know what i should put here.</p>
<div class="btn">
<button>Calculate now</button>
</div>
</div>
</header>
</div>
</body>
I don't know the context in which you need to have overflow hidden, usually you'd have a set height to enforce clipping? If you want to make sure the banner doesn't go outside the 100vh set on the header then you should put the overflow:hidden there. However it will always clip anything that goes outside its set height because that's what it's for..
But if you give your banner/parent container some padding, there will always be space around your child elements, including buttons to allow for effects like drop shadows etc. Then you can also move your button where-ever.
/* default margin and padding for all elements */
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
/* decrese font size of the HTML file */
html {
font-size: 62.5%;
}
/* Creating & styling hamburger menu */
.hamburger-menu {
width: 3rem;
height: 3rem;
position: fixed;
top: 5rem;
right: 3rem;
z-index: 200;
/* create lines for menu */
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
}
.line {
width: 100%;
height: 0.2rem;
background-color: #FFF;
box-shadow: 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
}
/* Costomize header */
.header {
width: 100%;
height: 100vh;
/*Header: parent of banner--> set position to relative */
position: relative;
}
/* Banner styling */
.banner {
background:#ccc;
/*just plopped this bg color in so we can see what's happening better */
padding:5%;
/*give your contents room to breathe with padding */
position: absolute;
top: 20%;
left: 5%;
perspective: 300rem;
overflow: hidden;
}
/* Styling h1 & h2 for banner */
.banner h1 {
font-family: Lobster Two, serif;
font-size: 8rem;
font-weight: 300;
color: darkred;
text-shadow: 0.3rem 0.4rem rgba(0, 0, 0, 0.8);
width: 100%;
opacity: 0;
animation: moveBanner 1s .7s forwards;
}
.banner1 h2 {
font-family: 'Lobster Two', serif;
font-size: 6rem;
font-weight: 300;
color: #FFF;
text-shadow: 0.2rem 0.3rem rgba(0, 0, 0, 0.8);
width: 100%;
opacity: 0;
animation: moveBanner 1s .7s forwards;
}
/* Paragraph styling for banner*/
.banner p {
font-family: 'Mulish', serif;
font-size: 4rem;
font-size: 700;
color: #FFF;
text-shadow: 0.2rem 0.3rem rgba(0, 0, 0, 1);
opacity: 0;
animation: moveBanner 1s .7s forwards;
}
/* Styling Button */
.banner .btn button {
margin-top:2rem;
width: 25rem;
height: 7rem;
background-color: darkred;
border: none;
font-family: 'Josefin Slab', serif;
font-size: 2rem;
font-weight: 700;
text-transform: uppercase;
color: #FFF;
text-shadow: 0.2rem 0.3rem rgba(0, 0, 0, 0.5);
box-shadow: 0.3rem 0.5rem rgba(0, 0, 0, 0.4);
cursor: pointer;
opacity: 0;
animation: moveBanner 1s .9s forwards;
}
/* Banner animation */
#keyframes moveBanner {
0% {
transform: translateY(40rem) rotateY(-20deg);
}
100% {
transform: translateY(0) rotateY(0);
opacity: 1;
}
}
<body>
<div class="container">
<!-- Menu style with 3 lines -> hamburger -->
<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="images/houses.jpg">
</div>
<div class="banner">
<h1>Red String</h1>
<div class="banner1">
<h2>Blah blah blah</h2>
</div>
<p>I dont know what i should put here.</p>
<div class="btn">
<button>Calculate now</button>
</div>
</div>
</header>
</div>
</body>
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.