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>
Related
I've been building my portfolio site and I'm now at the stage of making it more responsive. I built the site while using my monitors, but when the screen shrinks down to a standard laptop (i.e Macbook Pro), the div with my image overlaps with my "text-zone" div/class which contains the headings and information etc. Moving the image div outside of the container with the use of a fragment does not help either so I'm a bit stuck. My intended vision/goal is to have the image next to the text at all times but if the screen gets to small, it will shift under or over the text.
Here is the JSX:
const Home = () => {
return (
<div className="container home-page">
<div className = "text-zone">
<h1>My Name</h1>
<h2>Intern at xxx | Greater xxx Area</h2>
<Link to = "/about" className="flat-button">Learn More</Link>
</div>
<div class = "profile-img">
<img src = {Headshot} alt = "Headshot"/>
</div>
</div>
)
}
Here is the SCSS
.home-page {
.text-zone {
position: absolute;
left: 30%;
top: 50%;
transform: translateY(-50%);
width: 40%;
max-height: 90%;
}
h1 {
color: white;
font-size: 80px;
margin: 0;
font-family: 'Roboto Mono';
font-weight: 400;
animation: fadeIn 1s 1.7s backwards;
}
.profile-img {
position: absolute;
top: 30%;
right: 20%;
z-index: -1;
box-shadow: 4rem 3rem rgba(0, 0, 0, 0.4);
&:hover {
outline:2px solid darkgoldenrod;
outline-offset: 2rem;
transition: all .2s;
border-radius: 2px;
object-fit: cover;
}
}
}
h2 {
font-family: 'Roboto Mono';
color: #8d8d8d;
animation: fadeIn 1s 1.8s backwards ;
}
.flat-button {
background-color: white;
color: black;
font-size: 1.6rem;
border-radius: 6rem;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
margin-top: 10px;
animation: fadeIn 1s 1.8s backwards;
letter-spacing: 2px;
&:hover {
background-color: #8d8d8d;
outline:2px solid darkgoldenrod;
color: white;
}
}
In my opinion, if you try it like so, you can make it sooner and easier:
.home-page {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
min-height: 100vh;
.text-zone {
text-align: center;
#media (min-width: 768px) {
width: 40%;
text-align: left;
}
max-height: 90%;
padding: 0 16px;
}
h1 {
color: white;
font-size: 80px;
margin: 0;
font-family: 'Roboto Mono';
font-weight: 400;
animation: fadeIn 1s 1.7s backwards;
}
.profile-img {
margin-top: 140px;
padding: 0 16px;
z-index: -1;
box-shadow: 4rem 3rem rgba(0, 0, 0, 0.4);
#media (min-width: 1200px) {
margin-right: -180px;
}
&:hover {
outline:2px solid darkgoldenrod;
outline-offset: 2rem;
transition: all .2s;
border-radius: 2px;
object-fit: cover;
}
}
}
h2 {
font-family: 'Roboto Mono';
color: #8d8d8d;
animation: fadeIn 1s 1.8s backwards ;
}
.flat-button {
background-color: white;
color: black;
font-size: 1.6rem;
border-radius: 6rem;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
margin-top: 10px;
animation: fadeIn 1s 1.8s backwards;
letter-spacing: 2px;
&:hover {
background-color: #8d8d8d;
outline:2px solid darkgoldenrod;
color: white;
}
}
const Home = () => {
return (
<div className="container home-page">
<div className = "text-zone">
<h1>My Name</h1>
<h2>Intern at ... | Greater ... Area</h2>
<Link to = "/about" className="flat-button">Learn More</Link>
</div>
<div class = "profile-img">
<img src = {Headshot} alt = "Headshot"/>
</div>
</div>
)
}
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;
}
Div tag contains background image with linear gradient of black and transparent from bottom. On mouse hover state, image changes opacity and the text over the image changes color simultaneously. How to do all this three things aforementioned. I want to achieve this similar effect.
Here is my code:
.container{
position: relative;
cursor: pointer;
}
.container::after{
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(
0deg,
rgba(0,0,0, 0.8) ,
transparent 30%,
transparent
);
}
.container p{
position: absolute;
bottom: 2rem;
padding: 0 2rem;
text-transform: uppercase;
font-family: 'Josefin Sans', sans-serif;
font-size: 2rem;
font-weight: 300;
color: var(--white);
}
.container p:hover{
color: var(--black);
}
.container:hover{
opacity: 0.4;
}
<div class="container">
<img id="image1" src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80" alt="Deep Earth">
<p id="p1">Deep earth</p>
</div>
You just needed to do some re-organizing in your CSS so you're selectors were targeting the correct elements. I also added a z-index to the text so it wasn't under the gradient.
.container {
display: block;
position: relative;
cursor: pointer;
width: fit-content;
}
.container::after {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(0deg,
rgba(0, 0, 0, 0.8),
transparent 30%,
transparent);
}
.container p {
display: block;
position: absolute;
bottom: 2rem;
padding: 0 2rem;
text-transform: uppercase;
font-family: 'Josefin Sans', sans-serif;
font-size: 2rem;
font-weight: 300;
color: white;
z-index: 2;
}
.container:hover p {
color: black;
}
.container:hover img {
opacity: 0.4;
}
<div class="container">
<img id="image1" src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80" alt="Deep Earth">
<p id="p1">Deep earth</p>
</div>
I've changed up the CSS a fair bit, I've commented in the CSS code what I've done and why.
/* Body Margin 0 is just for the snippet */
body {margin: 0}
/* Added hidden overflow */
.container {
cursor: pointer;
overflow: hidden;
position: relative;
}
/* Use both before and after */
.container::before,
.container::after {
content: '';
position: absolute;
/* Same as top, right, bottom, left = 0 */
inset: 0;
/* z-index to control layer depth */
z-index: 1;
}
/* Use before to simulate the opacity change */
/* Stops the text from fading as well as the container */
.container::before {
background: white;
opacity: 0;
/* Place above dark gradient so that text is more visible */
z-index: 2;
/* Transition to make it look smooth */
transition: opacity 512ms 0ms ease-in-out;
}
.container::after {
background: linear-gradient(
0deg,
rgba(0,0,0, 0.8) ,
transparent 30%,
transparent
);
}
/* Removes bottom margin/padding from last element */
.container > *:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
/* Set the img to always be 100% of the viewport width */
.container img { width: 100vw }
.container p {
color: white;
position: absolute;
/* Same as bottom: 2rem; left: 2rem; */
inset: auto auto 2rem 2rem;
text-transform: uppercase;
font-family: 'Josefin Sans', sans-serif;
font-size: 2rem;
font-weight: 300;
/* Make sure the text wraps in the right place */
max-width: calc(100% - 4rem);
/* Forces text to be above before/after */
z-index: 3;
/* Linear transition here! */
/* White to black text can look out of sync otherwise */
transition: color 512ms 0ms linear;
}
.container:hover p { color: black }
.container:hover::before { opacity: 0.4 }
<div class="container">
<img id="image1" src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80" alt="Deep Earth">
<p id="p1">Deep earth</p>
</div>
I am looking for some css trick to show an element (already hidden) from bottom to a it's normal position.
This is a screenshot how it should be:
i did this but it doesn't work as i expected and like what is on the screenshot, when you hover, the text should slide to the top. i made that, but with this method i did, the title is a little bit far from the text bellow ( screenshot )
Please can somebody help to find a lite solution
Please can somebody help me to find a lite solution
.hebergements__container {
position: relative;
display: flex;
margin: auto;
width: 30rem;
}
.hebergements__container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ccc;
z-index: 1;
}
.hebergements__container:hover .hebergements__desc {
opacity: 1;
height: auto;
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
}
.hebergements__container:hover .hebergements__desc, .hebergements__container:hover .hebergements__title {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hebergements__container > img {
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.hebergements__content {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 41.8rem;
padding-left: 2.5rem;
padding-bottom: 2.8rem;
z-index: 1;
}
.hebergements__content .hebergements__title {
margin-bottom: 1rem;
}
.hebergements__content .hebergements__desc {
color: #fff;
}
.hebergements__content .hebergements__desc ul:first-child {
margin-top: 0;
}
.hebergements__content .hebergements__startFrom {
font-size: 1.1rem;
color: #fff;
margin-bottom: -0.8rem;
}
.hebergements__content .hebergements__price {
color: #fff;
font-size: 2.4rem;
font-weight: fontWeight(extra-bold);
}
.hebergements__content .hebergements__price .price-unity {
font-size: 1.6rem;
}
.hebergements__content .hebergements__pension {
color: #fff;
font-size: 1rem;
margin-top: 0.3rem;
}
.hebergements__content {
position: absolute;
bottom: 0;
left: 0;
padding: 2em;
width: 100%;
height: 50%;
}
.hebergements__content .hebergements__title, .hebergements__content .hebergements__desc {
transform: translate3d(0, 40px, 0);
}
.hebergements__content .hebergements__title {
transition: transform 0.35s;
}
.hebergements__content .hebergements__desc {
color: rgba(255, 255, 255, 0.8);
opacity: 0;
transition: opacity 0.2s, transform 0.35s;
}
.hebergements__container:hover .hebergements__desc {
opacity: 1;
}
.hebergements__container:hover .hebergements__title, .hebergements__container:hover .hebergements__desc {
transform: translate3d(0, 0, 0);
}
.hebergements__container:hover .hebergements__desc {
transition-delay: 0.05s;
transition-duration: 0.35s;
}
<div class="container product-hebergements">
<div class="hebergements__container">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/12.jpg" alt="img12"/>
<div class="hebergements__content">
<h2 class="hebergements__title">
Votre séjour en Club
</h2>
<div class="hebergements__desc">
<ul>
<li>En chambre ou en appartement</li>
<li>Capacité à partir de 2 personnes jusqu'à 10 personnes.</li>
<li>Formule pension demi pension inclus</li>
<li>Profitez des activités...Services</li>
</ul>
</div>
<div class="hebergements__bottom">
<div class="hebergements__pension">
8 jours/7 nuits . Pension complète. Prix par pers.
</div>
</div>
</div>
</div>
</div>
I'm not using my computer right now but, I think, to create your animation, you have to create a #keyframe. Basically, your 3 lines are hidden, and, when you hover it, a new style must be added, with the keyframe (and the visibility visible).
Your keyframe must contain something like :
Transform: translateX (you have to make your div go to the top)
Animation fill mode forward
This is not complete, but you got the idea.
Here is my try
.hebergements__container {
position: relative;
display: flex;
margin: auto;
width: 30rem;
}
.hebergements__container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ccc;
z-index: 1;
}
.hebergements__container:hover .hebergements__desc {
opacity: 1;
height: auto;
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
}
.hebergements__container:hover .hebergements__desc, .hebergements__container:hover .hebergements__title {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hebergements__container > img {
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.hebergements__content {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 41.8rem;
padding-left: 2.5rem;
padding-bottom: 2.8rem;
z-index: 1;
overflow: hidden; /* added this line */
}
.hebergements__content .hebergements__title {
margin-bottom: 1rem;
}
.hebergements__content .hebergements__desc {
color: #fff;
}
.hebergements__content .hebergements__desc ul:first-child {
margin-top: 0;
}
.hebergements__content .hebergements__startFrom {
font-size: 1.1rem;
color: #fff;
margin-bottom: -0.8rem;
}
.hebergements__content .hebergements__price {
color: #fff;
font-size: 2.4rem;
font-weight: fontWeight(extra-bold);
}
.hebergements__content .hebergements__price .price-unity {
font-size: 1.6rem;
}
.hebergements__content .hebergements__pension {
color: #fff;
font-size: 1rem;
margin-top: 0.3rem;
}
.hebergements__content {
position: absolute;
bottom: 0;
left: 0;
padding: 2em;
width: 100%;
height: 50%;
}
.hebergements__content .hebergements__title, .hebergements__content .hebergements__desc {
transform: translate3d(0, 40px, 0);
}
.hebergements__content .hebergements__title {
transition: transform 0.35s;
}
.hebergements__content .hebergements__desc {
color: rgba(255, 255, 255, 0.8);
opacity: 0;
transition: opacity 0.2s, transform 0.35s;
height: 2rem; /* added this line */
}
.hebergements__container:hover .hebergements__desc {
opacity: 1;
}
.hebergements__container:hover .hebergements__title, .hebergements__container:hover .hebergements__desc {
transform: translate3d(0, 0, 0);
}
.hebergements__container:hover .hebergements__desc {
transition-delay: 0.05s;
transition-duration: 0.35s;
height: auto; /* added this line */
}
<div class="container product-hebergements">
<div class="hebergements__container">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/12.jpg" alt="img12"/>
<div class="hebergements__content">
<h2 class="hebergements__title">
Votre séjour en Club
</h2>
<div class="hebergements__desc">
<ul>
<li>En chambre ou en appartement</li>
<li>Capacité à partir de 2 personnes jusqu'à 10 personnes.</li>
<li>Formule pension demi pension inclus</li>
<li>Profitez des activités...Services</li>
</ul>
</div>
<div class="hebergements__bottom">
<div class="hebergements__pension">
8 jours/7 nuits . Pension complète. Prix par pers.
</div>
</div>
</div>
</div>
</div>
Instead of debugging your code trying to workaround/find your errors, I created a 'generic' animated card based on your code and requirement.
The entire mechanism hinges on flexbox behaviour:
FBL column containers, for easy positioning
FBL content moved to flex-end. This forces all elements to the bottom of the card.
FBL 'flex-basis' animated .header from 0% to 40%. As the un-hovered value is 0% all elements reside at the bottom of the card. When changed to a higher value (< 40%), the .header grows, pushing itself towards the top of the card. This is the single main behaviour we need.
Animating the properties of various elements from some initial value to a hover state value moves/shows/sizes the end result.
BONUS some card hover/click action I always use.
I have commented the code, which makes reading a bit easier...
The Snippet
/* for debugging, remove/disable when done */
/* * { outline: 1px dashed }/**/
/***********************/
/* element definitions */
/***********************/
.card {
position: relative;
margin: 0 auto;
width: 30rem; /* not responsive!! */
aspect-ratio: 1/1;
}
.card > * { /* picture and content */
position: absolute;
inset: 0; /* stretched to fill parent (T/R/B/L) */
}
/* background picture under all content, stretched to fit parent */
.card .bg-pic { z-index: -1 }
.card .bg-pic img { display: block; width: 100%; height: 100%; object-fit: cover }
/* Flexbox container over card background image */
.card .inner {
z-index: 1;
display: flex; flex-flow: column wrap;
padding: 1rem;
justify-content: flex-end; /* move all elements to .inner bottom */
}
.card .inner > * {
/* all card .inner elements are FBL column containers */
display: flex; flex-flow: column wrap;
}
/********************************/
/* All hover animation settings */
/********************************/
/*
element defaults before animation with transitions set,
followed by animation settings.
*/
.card {
/* trasition properties, delay, behaviour */
--tr-f: all 0.05s ease-in-out; /* fast transition */
--tr-s: all 0.35s ease-in-out; /* slow */
}
.card .header {
flex-basis: 0%; /* makes it shrink to HTML default */
font-size: 1.5rem;
transition: var(--tr-f);
}
.card:hover .header {
/* When content/footer tend to wrap, fiddle with below 'flex-basis' < 40% */
flex-basis: 40%; /* makes it stretch to fill 40% */
font-size: 2rem;
text-align: center;
}
.card .bg-pic {
opacity: 0.5;
transition: var(--tr-s);
}
.card:hover .bg-pic {
opacity: 1;
}
.card .content {
/* hides fading text under pricing */
overflow: hidden; /* disable to test */
height : 0px;
opacity: 0;
transition: var(--tr-s);
}
.card:hover .content {
height : auto;
opacity: 1;
}
/*************/
/* Eye-candy */
/*************/
body { font-size: 1rem }
ul, li { padding: 0; list-style-type: none }
.card > * {
/* obfuscate picture for testing */
background-color: hsl(0,0%,0%,.5);/* remove me */
color: hsl(0,0%,100%,1);
cursor: pointer;
}
.title { font-size: 1.5rem }
.prix { font-size: 2.4rem; font-weight: bold }
.unit { font-size: 1.6rem }
/* BONUS: card hover/click animation */
.card {
/* GMD elevation 1dp */
box-shadow: 0px 2px 1px -1px rgba(0,0,0,.20),
0px 1px 1px 0px rgba(0,0,0,.14),
0px 1px 3px 0px rgba(0,0,0,.12);
}
.card:hover {
transform: scale(1.01);
/* GMD elevation 3dp */
box-shadow: 0px 3px 3px -2px rgba(0,0,0,.20),
0px 3px 4px 0px rgba(0,0,0,.14),
0px 1px 8px 0px rgba(0,0,0,.12);
}
.card:active:not(:focus), .card:focus {
transform: scale(1);
}
<div class="card">
<div class="bg-pic"><img src="https://picsum.photos/320" alt="" aria-hidden="true" /></div>
<div class="inner">
<div class="header">
<div>Votre séjour en Club</div>
</div>
<div class="content">
<ul>
<li class="title">some alt title</li>
<li>En chambre ou en appartement</li>
<li>Capacité à partir de 2 personnes jusqu'à 10 personnes.</li>
<li>Formule pension demi pension inclus</li>
<li>Profitez des activités...Services</li>
</ul>
</div>
<div class="footer">
<span>A partir de</span>
<span class="prix">529<span class="unit">€</span></span>
<div>8 jours/7 nuits . Pension complète. Prix par pers.</div>
</div>
</div>
</div>
I am having a problem with the hero image, it always hides my dropdown menu even though I put a higher z-index on the menu. I have found a "solution" for this, I gave the hero image z-index:-1, but now my button on the hero image doesn't work. I want to have this work without any workarounds.
jsfiddle here (here the dropdown works, because #hero-img has z-index:-1, but the top button doesn't work)
https://jsfiddle.net/xLo7wcph/1/
1) please help me find a reason why the z-index > 0 doesn't work + solution for this, without using z-index:0;
2) bonus question, why the button doesn't work when I set the hero img on negative z-index even though I have btn z-index : 1;
<nav id="navbar" class="flex">
<div class="flex-1 "><img src="images/drevo2.svg"></div>
<div class="flex-2 ">falco's woodwork.</div>
<div class="flex-3 flex-element push">
domů
</div>
<div class="flex-4 flex-element">
nabídka
<div class="dropdown">
<p>motýlci</p>
<p>dekorace</p>
<p>ostatní</p>
</div>
</div>
<div class="flex-5 flex-element">
kontakt
</div>
<div class="flex-6 flex-element">
nákup
</div>
</nav>
<div id="hero-img">
<div class="text-box">
<h1>
<span class="text-box--main">objevte krásu</span>
<br>
<span class="text-box--sub">ručně tvořených výrobků</span>
<br>
</h1>
</div>
<button class="btn"><img src="images/SIPKA DOLU.svg"></button>
</div>
#navbar{
border-bottom:solid 1px black;
.dropdown{
position:absolute;
z-index: 3;
display:none;
border-top:none;
padding:1rem 2rem;
background-color: rgba(0, 0, 0, 0.801);
left:-1.8rem;
top:3.7rem;
p{
color:white;
&:hover{
border-bottom: 1px solid white;
}
}
}
.flex-element:hover .dropdown{
display:block;
z-index: 2;
}
}
#hero-img{
position: relative;
background:linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.5) 0%), url("../images/hero image.jpg") no-repeat top;
height: calc(100vh - 3.8rem);/* - vyska nav baru*/
background-size: cover;
z-index: -1;
}
Removing z-index: -1; from the #hero-img and adding these lines solves your problem.
#navbar{
position: relative;
z-index: 1;
}
Initially what was happening is, position: relative on #hero-img was hiding your dropdown. because position-wise #hero-img was upper than #navbar. that's why you should also add z-index in the #navbar.
And you gave negative z-index value to appear the dropdown. when you give negative z-index to an element it will be rendered under other elements.
In this case, the #hero-img was under the body. the button won't show up when you give high z-index value because it's parent #hero-img is under the top layer.
working demo:
btn,
.btn:link,
.btn:visited {
background-color: rgba(255, 255, 255, 0);
border-style: none;
animation: btnFadeIn .5s ease-in forwards;
outline: none;
position: absolute;
bottom: 2%;
left: 50%;
transform: translateX(-50%);
z-index: 3; }
.btn:hover {
cursor: pointer; }
#navbar {
border-bottom: solid 1px black; }
#navbar .dropdown {
position: absolute;
z-index: 3;
display: none;
border-top: none;
padding: 1rem 2rem;
background-color: rgba(0, 0, 0, 0.801);
left: -1.8rem;
top: 3.7rem; }
#navbar .dropdown p {
color: white; }
#navbar .dropdown p:hover {
border-bottom: 1px solid white; }
#navbar .flex-element:hover .dropdown {
display: block;
z-index: 2; }
#navbar .flex-1 {
width: 3rem;
height: 3rem;
margin-left: .5rem;
align-self: center;
padding: .3rem;
font-size: 2rem; }
#navbar .flex-2 {
padding: .3rem;
font-size: 2rem;
margin-right: 5rem; }
#navbar .flex-2 a {
text-decoration: none;
color: black; }
#navbar .flex-element {
padding: .3rem;
font-size: 2rem;
margin-right: 5rem;
transition: all .2s ease-out;
position: relative; }
#navbar .flex-element a {
text-decoration: none;
color: black; }
#navbar .flex-element:first-child {
margin-right: 0; }
#navbar .flex-element:hover {
transform: translateY(1.5px); }
#navbar .flex-element:active {
transform: translateY(-1.5px); }
#font-face {
font-family: 'Proxima Nova';
src: url("../proxima_ssv/Proxima Nova Thin.otf") format("opentype"); }
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit; }
html {
font-size: 62.5%;
scroll-behavior: smooth; }
body {
font-family: 'Proxima Nova', sans-serif;
line-height: 1.6;
color: black;
box-sizing: border-box; }
.push {
margin-left: auto; }
.line {
background-color: #C6C6C6;
border: solid .1rem #C6C6C6;
max-width: 960px; }
#navbar{
position: relative;
z-index: 1;
}
#hero-img {
position: relative;
/*background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.5) 0%), url("../images/hero image.jpg") no-repeat top;*/
background-color:darkgreen;
height: calc(100vh - 3.8rem);
/* - vyska nav baru*/
background-size: cover;
}
.text-box {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, 40%);
backface-visibility: hidden;
text-transform: uppercase;
text-align: left; }
.text-box h1 {
line-height: 1; }
.text-box--main {
display: inline-block;
font-size: 4rem;
color: white;
animation: moveInLeft 1.5s ease-out; }
.text-box--sub {
display: inline-block;
color: white;
font-size: 6.5rem;
animation: moveInRight 1.5s ease-out; }
.flex {
display: flex;
flex-wrap: wrap; }
<nav id="navbar" class="flex">
<div class="flex-1 "></div>
<div class="flex-2 ">falco's woodwork.</div>
<div class="flex-3 flex-element push">
domů
</div>
<div class="flex-4 flex-element">
nabídka
<div class="dropdown">
<p>motýlci</p>
<p>dekorace</p>
<p>ostatní</p>
</div>
</div>
<div class="flex-5 flex-element">
kontakt
</div>
<div class="flex-6 flex-element">
nákup
</div>
</nav>
<div id="hero-img">
<div class="text-box">
<h1>
<span class="text-box--main">objevte krásu</span>
<br>
<span class="text-box--sub">ručně tvořených výrobků</span>
<br>
</h1>
</div>
<button class="btn">theButtonThatDoesntWork</button>
</div>