I have a simple html to display a video but it doesn't look right. Below is the sscreenshot, HTML and CSS. How can I stop the video from overlapping and be displayed correctly?
.video-responsive {
text-align: center;
overflow: hidden;
height: 0;
}
.video-responsive iframe {
margin: 0;
padding: 0;
height: 70%;
width: 70%;
display: block;
position: absolute;
}
<p>Watch the video recording to see the whole conference</p>
<div class="video-responsive">
<iframe width="320" height="240" src="https://www.youtube.com/embed/UHpaxaJ-GgU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<br/>
<p>If you have any questions, please email us at contact#metis.com</p>
Remove position: absolute and height: 0 on the wrapper.
.video-responsive {
text-align: center;
}
.video-responsive iframe {
margin: 0;
padding: 0;
height: 70%;
width: 70%;
display: block;
}
<p>Watch the video recording to see the whole conference</p>
<div class="video-responsive">
<iframe width="320" height="240" src="https://www.youtube.com/embed/UHpaxaJ-GgU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<br/>
<p>If you have any questions, please email us at contact#metis.com</p>
Related
My YouTube videos on my website look weird on mobile, I have tried to change the width and height of each of them and still have the same issue.
HTML CODE
<div class="playing-cards">
<iframe width="611" height="450" src="https://www.youtube.com/embed/7qjkrDsgvO8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="closr">
<iframe width="611" height="450" src="https://www.youtube.com/embed/_PupZlKYYCU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
**CSS CODE**
}
.playing-cards{
text-align: center;
height: 560px;
width: 315px;
position: absolute;
top: 107%; right: 0%;
bottom: 50%; left: 30%;
}
.closr{
text-align: center;
height: 560px;
width: 315px;
position: absolute;
top: 185%; right: 0%;
bottom: 40%; left: 30%;
}
You should change it to:
<iframe width="315" height="560" src="https://www.youtube.com/embed/7qjkrDsgvO8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
So it resizes to 315x560.
I am working on a school project and am optimizing for mobile. When I go on the website, I see a white gap on the right side of the screen (see screenshot). I have tried to do research but everything I've found doesn't work. iPhone Website. Could someone help guide me in the right direction? I have never made a website before and I just do not understand how to optimize a website at all haha
header{
background-image: url(banner1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: #FACABC;
background-position: center;
display: block;
position: relative;
}
h1, h2, h3, footer{
text-align: center;
}
h1{
color: #FACABC;
font-family: RedRock, "Times New Roman", sans-sarif;
line-height: 5px;
}
.title{
font-size: 500%;
}
h2{
font-family: primer, "Times New Roman", sans-sarif;
font-size: 200%;
text-shadow: 1px 1px 2px #FACABC;
color: #987b74;
}
#homelink{
text-align: left;
text-decoration: none;
padding-left: 2%;
font-size: 135%;
font-family: RedRock, "Times New Roman", sans-sarif;
color: #FACABC;
text-shadow: 1px 1px 2px black;
}
ion-icon{
padding-left: 6em;
font-size: 41px;
color: #987b74;
}
ion-icon:hover{
color: #FACABC;
transition: all 0.5s ease;
}
body{
font-family: RedRock, "Times New Roman", sans-sarif;
margin: 0;
/* test and see if this works wit/without below two things*/
overflow-x: hidden;
overflow-y: scroll;
}
.container{
position: sticky;
top: 0;
position: -webkit-sticky;
background: #FACABC;
z-index:1;
}
/* Nav bar*/
.container nav{
width: 100%;
height: 76px;
font-size: 48px;
}
.container nav a{
text-align: center;
text-decoration: none;
color: #987b74;
}
.container nav ul{
width: 100%;
height: 100%;
margin: 0 auto;
list-style-type: none;
transition: all 0.5s ease;
}
.container nav ul li{
width: 10%;
float: left;
text-align: center;
color: #987b74;
font-size: 41px;
font-weight: bold;
transition: all 0.5s ease;
position: sticky;
cursor: pointer;
top: 0;
}
.container nav ul li:hover{
color: #5E4C47;
}
.container nav ul li ul.sub-nav {
position: absolute;
background-color: #FACABC; /* Background of drop down */
width: 75%;
height: 110px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.14), -1px 0px 1px rgba(0,0,0,0.14);
top: 74px;
left: 0;
visibility: hidden;
opacity: 0;
}
.container nav ul li ul.sub-nav li{
font-size: 31px;
font-family: primer, "Times New Roman", sans-sarif;
width: 75%;
}
.container nav ul li:hover ul.sub-nav{ /* Drop down menu visibility */
visibility: visible;
opacity: 75%;
margin-top: 2px;
}
.container li{
display: inline-block;
}
.container nav ul li ul.sub-nav a:hover{
color: #5E4C47;
transition: all 0.5s ease;
}
.container nav ul li ul.sub-nav a{
padding: 0;
}
main h2{
padding-right: 10em;
padding-left: 10em;
}
main .learn-more{
border-radius: 2px;
background-color: #FACABC;
border: none;
color: #987b74;
text-align: center;
font-size: 28px;
padding: 20px;
width: 275px;
transition: all 0.5s;
cursor: pointer;
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: primer, "Times New Roman", sans-sarif;
}
main .learn-more span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
main .learn-more span:after{
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
main .learn-more:hover span{
padding-right: 25px;
}
main .learn-more:hover span:after{
opacity: 1;
right: 0;
}
.video-trailer{
background-image: radial-gradient(#f8f8f8, #FACABC, #f8f8f8);
}
main ul li{
list-style-type: none;
display: inline;
padding-left: 2%;
padding-right: 0%;
}
main h1{
font-size: 60px;
}
footer{
color: #987b74;
}
.backgroundcolor{ /* To get that cream color background!*/
background-color: #f8f8f8;
}
table {
font-family: primer, "Times New Roman", sans-sarif;
color: #987b74;
font-weight: bold;
border-collapse: collapse;
width: 50%;
margin-left: auto;
margin-right: auto;
}
#media screen and (max-width: 640px)
{
body, html{
overflow-x: hidden;
padding: 0.8em 0;
}
}
<!DOCTYPE html>
<html>
<div id="wrapper">
<title>HighItsKy</title>
<link href="highitsky.css" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<header>
<a id="homelink" href="index.html">
<h2 id="homelink">HighItsKy</h2>
</a>
<br><br><br><br>
<span class="title"><h1>HighItsKy</h1></span>
<h2>part time streamer, full time vibe</h2>
<br><br>
<ion-icon name="logo-twitch"></ion-icon>
<ion-icon name="logo-discord"></ion-icon>
<ion-icon name="logo-youtube"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-tiktok"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<br><br><br><br><br>
</header>
<div class="container">
<nav>
<ul class="tabs">
<a href="index.html">
<li>Home</li>
</a>
<li style="white-space: nowrap;">About Me
<ul class="sub-nav">
<a href="AboutMe.html">
<li>ABOUT</li>
</a>
<a href="Cloves.html">
<li>CLOVES</li>
</a>
</ul>
</li>
<li>Socials
<ul class="sub-nav">
<a href="Socials.html">
<li>SOCIALS</li>
</a>
<a href="Contact.html">
<li>CONTACT</li>
</a>
</ul>
</li>
<a href="Community.html">
<li>Community</li>
</a>
<a href="Partnerships.html">
<li>Partnerships</li>
</a>
<li>Support
<ul class="sub-nav">
<a href="Donate.html">
<li>DONATE</li>
</a>
<a href="Merch.html">
<li>MERCH</li>
</a>
<a href="Causes.html">
<li>CAUSES</li>
</a>
</ul>
</li>
</ul>
</nav>
<div class="header"></div>
</div>
<main>
<div class="backgroundcolor">
<br><br>
<h1>High, I'm Ky</h1>
<br>
<h2>I started streaming on Twitch in February of 2020, with my streams mainly consisting of Minecraft content!
Whether I am dying a lot in Singleplayer or getting scared by creepers, my main focus is maintaining a positive and welcoming
community in a not-so-welcoming world. I currently live in Kansas, and I am 19 years old and majoring in Computer Science at FHSU. . . </h2>
<br>
<button class="learn-more"><span>LEARN MORE </span></button>
<br><br><br><br><br>
</div>
<div class="video-trailer">
<br><br>
<h2>My streams consist of a lot of yelling, dying, losing, and sometimes crying, but...</h2>
<br><br>
<center>
<video controls height="64%" width="62%" style='border: 2px solid #FACABC;'>
<source src="trailer.mp4" srclang="en" type="video/mp4">
</video>
<br><br>
<h2>what matters is that I get to spend time with the people that I love; my community!</h2>
<br><br>
</div>
<div class="backgroundcolor">
<br><br>
<h1>High-lights</h1>
<br><br>
<hr size="2" color="#987b74">
<br><br>
<ul>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HQQ3LfzPrEI"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/zNUe4U8ps5k"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Sh7yxSijuxI"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<br><br>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PGgvM_9pZok"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/S_M8JgzfdW4"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Pk0GZE-3EqQ"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
</ul>
<br><br>
<hr size="2" color="#987b74">
<footer>HighItsKy © 2020 </footer>
</div>
</main>
</html>
You should add width to your body
#media screen and (max-width: 640px)
{
body, html{
width: 100vw;
overflow-x: hidden;
padding: 0.8em 0;
}
}
header{
background-image: url(banner1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: #FACABC;
background-position: center;
display: block;
position: relative;
}
h1, h2, h3, footer{
text-align: center;
}
h1{
color: #FACABC;
font-family: RedRock, "Times New Roman", sans-sarif;
line-height: 5px;
}
.title{
font-size: 500%;
}
h2{
font-family: primer, "Times New Roman", sans-sarif;
font-size: 200%;
text-shadow: 1px 1px 2px #FACABC;
color: #987b74;
}
#homelink{
text-align: left;
text-decoration: none;
padding-left: 2%;
font-size: 135%;
font-family: RedRock, "Times New Roman", sans-sarif;
color: #FACABC;
text-shadow: 1px 1px 2px black;
}
ion-icon{
padding-left: 6em;
font-size: 41px;
color: #987b74;
}
ion-icon:hover{
color: #FACABC;
transition: all 0.5s ease;
}
body{
font-family: RedRock, "Times New Roman", sans-sarif;
margin: 0;
/* test and see if this works wit/without below two things*/
overflow-x: hidden;
overflow-y: scroll;
}
.container{
position: sticky;
top: 0;
position: -webkit-sticky;
background: #FACABC;
z-index:1;
}
/* Nav bar*/
.container nav{
width: 100%;
height: 76px;
font-size: 48px;
}
.container nav a{
text-align: center;
text-decoration: none;
color: #987b74;
}
.container nav ul{
width: 100%;
height: 100%;
margin: 0 auto;
list-style-type: none;
transition: all 0.5s ease;
}
.container nav ul li{
width: 10%;
float: left;
text-align: center;
color: #987b74;
font-size: 41px;
font-weight: bold;
transition: all 0.5s ease;
position: sticky;
cursor: pointer;
top: 0;
}
.container nav ul li:hover{
color: #5E4C47;
}
.container nav ul li ul.sub-nav {
position: absolute;
background-color: #FACABC; /* Background of drop down */
width: 75%;
height: 110px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.14), -1px 0px 1px rgba(0,0,0,0.14);
top: 74px;
left: 0;
visibility: hidden;
opacity: 0;
}
.container nav ul li ul.sub-nav li{
font-size: 31px;
font-family: primer, "Times New Roman", sans-sarif;
width: 75%;
}
.container nav ul li:hover ul.sub-nav{ /* Drop down menu visibility */
visibility: visible;
opacity: 75%;
margin-top: 2px;
}
.container li{
display: inline-block;
}
.container nav ul li ul.sub-nav a:hover{
color: #5E4C47;
transition: all 0.5s ease;
}
.container nav ul li ul.sub-nav a{
padding: 0;
}
main h2{
padding-right: 10em;
padding-left: 10em;
}
main .learn-more{
border-radius: 2px;
background-color: #FACABC;
border: none;
color: #987b74;
text-align: center;
font-size: 28px;
padding: 20px;
width: 275px;
transition: all 0.5s;
cursor: pointer;
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: primer, "Times New Roman", sans-sarif;
}
main .learn-more span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
main .learn-more span:after{
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
main .learn-more:hover span{
padding-right: 25px;
}
main .learn-more:hover span:after{
opacity: 1;
right: 0;
}
.video-trailer{
background-image: radial-gradient(#f8f8f8, #FACABC, #f8f8f8);
}
main ul li{
list-style-type: none;
display: inline;
padding-left: 2%;
padding-right: 0%;
}
main h1{
font-size: 60px;
}
footer{
color: #987b74;
}
.backgroundcolor{ /* To get that cream color background!*/
background-color: #f8f8f8;
}
table {
font-family: primer, "Times New Roman", sans-sarif;
color: #987b74;
font-weight: bold;
border-collapse: collapse;
width: 50%;
margin-left: auto;
margin-right: auto;
}
#media screen and (max-width: 640px)
{
body, html{
width: 100vw;
overflow-x: hidden;
padding: 0.8em 0;
}
}
<!DOCTYPE html>
<html>
<div id="wrapper">
<title>HighItsKy</title>
<link href="highitsky.css" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<header>
<a id="homelink" href="index.html">
<h2 id="homelink">HighItsKy</h2>
</a>
<br><br><br><br>
<span class="title"><h1>HighItsKy</h1></span>
<h2>part time streamer, full time vibe</h2>
<br><br>
<ion-icon name="logo-twitch"></ion-icon>
<ion-icon name="logo-discord"></ion-icon>
<ion-icon name="logo-youtube"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-tiktok"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<br><br><br><br><br>
</header>
<div class="container">
<nav>
<ul class="tabs">
<a href="index.html">
<li>Home</li>
</a>
<li style="white-space: nowrap;">About Me
<ul class="sub-nav">
<a href="AboutMe.html">
<li>ABOUT</li>
</a>
<a href="Cloves.html">
<li>CLOVES</li>
</a>
</ul>
</li>
<li>Socials
<ul class="sub-nav">
<a href="Socials.html">
<li>SOCIALS</li>
</a>
<a href="Contact.html">
<li>CONTACT</li>
</a>
</ul>
</li>
<a href="Community.html">
<li>Community</li>
</a>
<a href="Partnerships.html">
<li>Partnerships</li>
</a>
<li>Support
<ul class="sub-nav">
<a href="Donate.html">
<li>DONATE</li>
</a>
<a href="Merch.html">
<li>MERCH</li>
</a>
<a href="Causes.html">
<li>CAUSES</li>
</a>
</ul>
</li>
</ul>
</nav>
<div class="header"></div>
</div>
<main>
<div class="backgroundcolor">
<br><br>
<h1>High, I'm Ky</h1>
<br>
<h2>I started streaming on Twitch in February of 2020, with my streams mainly consisting of Minecraft content!
Whether I am dying a lot in Singleplayer or getting scared by creepers, my main focus is maintaining a positive and welcoming
community in a not-so-welcoming world. I currently live in Kansas, and I am 19 years old and majoring in Computer Science at FHSU. . . </h2>
<br>
<button class="learn-more"><span>LEARN MORE </span></button>
<br><br><br><br><br>
</div>
<div class="video-trailer">
<br><br>
<h2>My streams consist of a lot of yelling, dying, losing, and sometimes crying, but...</h2>
<br><br>
<center>
<video controls height="64%" width="62%" style='border: 2px solid #FACABC;'>
<source src="trailer.mp4" srclang="en" type="video/mp4">
</video>
<br><br>
<h2>what matters is that I get to spend time with the people that I love; my community!</h2>
<br><br>
</div>
<div class="backgroundcolor">
<br><br>
<h1>High-lights</h1>
<br><br>
<hr size="2" color="#987b74">
<br><br>
<ul>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HQQ3LfzPrEI"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/zNUe4U8ps5k"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Sh7yxSijuxI"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<br><br>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PGgvM_9pZok"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/S_M8JgzfdW4"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Pk0GZE-3EqQ"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
</ul>
<br><br>
<hr size="2" color="#987b74">
<footer>HighItsKy © 2020 </footer>
</div>
</main>
</html>
This is my first time creating a website for a school project so bear with my messy code. My problem is that when I scroll with my nav bar that sticks to the top and it crosses over my Learn More button, the button overlaps over the NAVBar. Does anyone know how to fix this?
.container {
position: sticky;
top: 0;
position: -webkit-sticky;
background: #FACABC;
}
nav {
z-index: 9999;
}
/* Nav bar*/
.container nav {
width: 100%;
height: 76px;
font-size: 48px;
padding-left: 7em;
/* Centers "Home, About me, Socials, etc" text */
}
.container nav a {
text-align: center;
text-decoration: none;
color: #987b74;
padding-right: 100px;
}
.container nav ul {
width: 100%;
height: 100%;
margin: 0 auto;
list-style-type: none;
transition: all 0.5s ease;
}
.container nav ul li {
width: 10%;
float: left;
text-align: center;
color: #987b74;
font-size: 41px;
font-weight: bold;
transition: all 0.5s ease;
position: sticky;
cursor: pointer;
top: 0;
}
.container nav ul li:hover {
color: #5E4C47;
}
.container nav ul li ul.sub-nav {
position: absolute;
background: white;
/* Background of drop down */
width: 75%;
height: 110px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.14), -1px 0px 1px rgba(0, 0, 0, 0.14);
top: 75px;
left: 0;
visibility: hidden;
opacity: 0;
}
.container nav ul li ul.sub-nav li {
font-size: 31px;
font-family: primer, "Times New Roman", sans-sarif;
width: 75%;
}
.container nav ul li:hover ul.sub-nav
/* Drop down menu visibility */
{
visibility: visible;
opacity: 75%;
margin-top: 2px;
}
.container li {
display: inline-block;
}
.container nav ul li ul.sub-nav a:hover {
color: #5E4C47;
transition: all 0.5s ease;
}
.container nav ul li ul.sub-nav a {
padding: 0;
}
main h2 {
padding-right: 10em;
padding-left: 10em;
}
main .learn-more {
border-radius: 2px;
background-color: #FACABC;
border: none;
color: #987b74;
text-align: center;
font-size: 28px;
padding: 20px;
width: 275px;
transition: all 0.5s;
cursor: pointer;
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: primer, "Times New Roman", sans-sarif;
}
main .learn-more span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
main .learn-more span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
main .learn-more:hover span {
padding-right: 25px;
}
main .learn-more:hover span:after {
opacity: 1;
right: 0;
}
<div id="wrapper">
<title>HighItsKy</title>
<link href="highitsky.css" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<header>
<a id="homelink" href="index.html">
<h2 id="homelink">HighItsKy</h2>
</a>
<br><br><br>
<br>
<span class="title"><h1>HighItsKy</h1></span>
<h2>part time streamer, full time vibe</h2>
<br><br>
<a href="https://www.twitch.tv/highitsky/" target="_blank">
<ion-icon name="logo-twitch"></ion-icon>
</a>
<a href="https://discord.gg/M2umXEhkNq" target="_blank">
<ion-icon name="logo-discord"></ion-icon>
</a>
<a href="https://youtube.com/highitsky" target="_blank">
<ion-icon name="logo-youtube"></ion-icon>
</a>
<a href="https://www.instagram.com/highitsky_/" target="_blank">
<ion-icon name="logo-instagram"></ion-icon>
</a>
<a href="https://www.tiktok.com/#highitsky" target="_blank">
<ion-icon name="logo-tiktok"></ion-icon>
</a>
<a href="https://www.twitter.com/highitsky_/" target="_blank">
<ion-icon name="logo-twitter"></ion-icon>
</a>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<br><br><br><br><br>
</header>
<div class="container">
<nav>
<ul>
<a href="index.html">
<li>Home</li>
</a>
<li>About Me
<ul class="sub-nav">
<a href="AboutMe.html">
<li>ABOUT</li>
</a>
<a href="Cloves.html">
<li>CLOVES</li>
</a>
</ul>
</li>
<li>Socials
<ul class="sub-nav">
<a href="Socials.html">
<li>SOCIALS</li>
</a>
<a href="Contact.html">
<li>CONTACT</li>
</a>
</ul>
</li>
<a href="Community.html">
<li>Community</li>
</a>
<a href="Partnerships.html">
<li>Partnerships</li>
</a>
<li>Support
<ul class="sub-nav">
<a href="Donate.html">
<li>DONATE</li>
</a>
<a href="Merch.html">
<li>MERCH</li>
</a>
<a href="Organizations.html">
<li>OTHER</li>
</a>
</ul>
</li>
</ul>
</nav>
<div class="header"></div>
</div>
<main>
<div class="backgroundcolor">
<br><br>
<h1>High, I'm Ky
<h1><br>
<h2>I started streaming on . . . </h2>
<br>
<button class="learn-more"><span>LEARN MORE </span></button>
<br><br><br><br><br>
</div>
<div class="video-trailer">
<br><br>
<h2>My streams consist of a lot of yelling, dying, losing, and sometimes crying, but...</h2>
<br><br>
<center>
<video controls="controls" height="64%" width="62%" style='border: 2px solid #FACABC;'>
<source src="trailer.mp4" type="video/mp4">
</video>
<br><br>
<h2>what matters is that I get to spend time with the people that I love; my community!</h2>
<br><br>
</div>
<div class="backgroundcolor">
<br><br>
<h1>High-lights</h1>
<br><br>
<hr size="2" color="#987b74">
<br><br>
<ul>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HQQ3LfzPrEI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/zNUe4U8ps5k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Sh7yxSijuxI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<br><br>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PGgvM_9pZok" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/S_M8JgzfdW4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Pk0GZE-3EqQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
</ul>
<br><br>
<hr size="2" color="#987b74">
<footer>HighItsKy © 2020 </footer>
</div>
</main>
Here you go, z-index is really good for that. When you have z-index, it's basically what you want in front. So here, I put z-index in the .container class, and you can see that the navbar is always up front.
.container
{
position: sticky;
top: 0;
position: -webkit-sticky;
background: #FACABC;
z-index:1;
}
nav
{
z-index: 9999;
}
/* Nav bar*/
.container nav
{
width: 100%;
height: 76px;
font-size: 48px;
padding-left: 7em; /* Centers "Home, About me, Socials, etc" text */
}
.container nav a
{
text-align: center;
text-decoration: none;
color: #987b74;
padding-right: 100px;
}
.container nav ul
{
width: 100%;
height: 100%;
margin: 0 auto;
list-style-type: none;
transition: all 0.5s ease;
}
.container nav ul li
{
width: 10%;
float: left;
text-align: center;
color: #987b74;
font-size: 41px;
font-weight: bold;
transition: all 0.5s ease;
position: sticky;
cursor: pointer;
top: 0;
}
.container nav ul li:hover
{
color: #5E4C47;
}
.container nav ul li ul.sub-nav
{
position: absolute;
background: white; /* Background of drop down */
width: 75%;
height: 110px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.14), -1px 0px 1px rgba(0,0,0,0.14);
top: 75px;
left: 0;
visibility: hidden;
opacity: 0;
}
.container nav ul li ul.sub-nav li
{
font-size: 31px;
font-family: primer, "Times New Roman", sans-sarif;
width: 75%;
}
.container nav ul li:hover ul.sub-nav /* Drop down menu visibility */
{
visibility: visible;
opacity: 75%;
margin-top: 2px;
}
.container li
{
display: inline-block;
}
.container nav ul li ul.sub-nav a:hover
{
color: #5E4C47;
transition: all 0.5s ease;
}
.container nav ul li ul.sub-nav a
{
padding: 0;
}
main h2
{
padding-right: 10em;
padding-left: 10em;
}
main .learn-more {
border-radius: 2px;
background-color: #FACABC;
border: none;
color: #987b74;
text-align: center;
font-size: 28px;
padding: 20px;
width: 275px;
transition: all 0.5s;
cursor: pointer;
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: primer, "Times New Roman", sans-sarif;
}
main .learn-more span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
main .learn-more span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
main .learn-more:hover span {
padding-right: 25px;
}
main .learn-more:hover span:after {
opacity: 1;
right: 0;
}
<!DOCTYPE html>
<div id="wrapper">
<title>HighItsKy</title>
<link href="highitsky.css" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<header>
<a id="homelink" href="index.html"><h2 id="homelink">HighItsKy</h2></a>
<br><br><br>
<br>
<span class="title"><h1>HighItsKy</h1></span>
<h2>part time streamer, full time vibe</h2>
<br><br>
<ion-icon name="logo-twitch"></ion-icon>
<ion-icon name="logo-discord"></ion-icon>
<ion-icon name="logo-youtube"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-tiktok"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<br><br><br><br><br>
</header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About Me
<ul class="sub-nav">
<li>ABOUT</li>
<li>CLOVES</li>
</ul>
</li>
<li>Socials
<ul class="sub-nav">
<li>SOCIALS</li>
<li>CONTACT</li>
</ul></li>
<li>Community</li>
<li>Partnerships</li>
<li>Support
<ul class="sub-nav">
<li>DONATE</li>
<li>MERCH</li>
<li>OTHER</li>
</ul></li>
</ul>
</nav>
<div class="header"></div>
</div>
<main>
<div class="backgroundcolor">
<br><br><h1>High, I'm Ky<h1><br>
<h2>I started streaming on Twitch in February of 2020, with my streams mainly consisting of Minecraft content!
Whether I am dying a lot in Singleplayer or getting scared by creepers, my main focus is maintaining a positive and welcoming
community in a not-so-welcoming world. I currently live in Kansas, and I am 19 years old and majoring in Computer Science at FHSU. . . </h2>
<br>
<button class="learn-more"><span>LEARN MORE </span></button>
<br><br><br><br><br>
</div>
<div class="video-trailer">
<br><br>
<h2>My streams consist of a lot of yelling, dying, losing, and sometimes crying, but...</h2>
<br><br>
<center>
<video controls="controls" height="64%" width="62%" style='border: 2px solid #FACABC;'>
<source src="trailer.mp4" type="video/mp4">
</video>
<br><br>
<h2>what matters is that I get to spend time with the people that I love; my community!</h2>
<br><br>
</div>
<div class="backgroundcolor">
<br><br>
<h1>High-lights</h1>
<br><br>
<hr size="2" color="#987b74">
<br><br>
<ul>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HQQ3LfzPrEI"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/zNUe4U8ps5k"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Sh7yxSijuxI"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<br><br>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PGgvM_9pZok"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/S_M8JgzfdW4"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Pk0GZE-3EqQ"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
</ul>
<br><br>
<hr size="2" color="#987b74">
<footer>HighItsKy © 2020 </footer>
</div>
</main>
In order to make sure that the nav bar is above any other element in the page you should move the z-index value that you have on the nav selector to the .container class.
The two css elements will then become:
.container
{
position: sticky;
top: 0;
position: -webkit-sticky;
background: #FACABC;
z-index: 9999;
}
nav
{
}
Please note that even if it has no impact on the current issue, I would strongly encourage you to restructure the HTML code. A valid HTML document has the following top structure:
<!DOCTYPE html>
<html>
<head>
<title>HighItsKy</title>
<link href="highitsky.css" rel="stylesheet">
<!-- other links and meta-information -->
</head>
<body>
<!-- all visible elements from the document: div, p, span ... -->
</body>
</html>
Any other elements that you would like to add need to go in <head>...</head> section (external scripts or CSS, meta-information) or <body>...</body> section (visible elements).
I want to use horizontal scrolling for video testimonials in a single row in a responsive website but having problem.Container class width is more than col-12 and that is is leaves space and shows horizontal scroll on page, when i add more videos , space increases and i also used overflow property for the same. i use sass for this pattern.
it leaves horizontal space on page
.aspx file
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="pn-Product_Wrapper">
<div id="pnProduct" class="pn-Product">
<div id="pnProductContents" class="pn-Product_Contents">
<div class="pn-Product_Link" aria-selected="true">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.css file
.pn-Product_Wrapper
{
position: relative;
padding: 0 11px;
box-sizing: border-box;
}
.pn-Product {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
position: relative;
font-size: 0;
}
.pn-Product_Contents {
float: left;
-webkit-transition: -webkit-transform .2s ease-in-out;
transition: -webkit-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}
.pn-Product_Link {
text-decoration: none;
color: #888;
font-size: 1.2rem;
font-family: -apple-system, sans-serif;
display: -webkit-inline-box;
display: inline-flex;
-webkit-box-align: center;
align-items: center;
min-height: 44px;
border: 1px solid transparent;
padding: 0 11px;
}
you can refer my code pen https://codepen.io/jishnuvp/pen/povGrGq
$('.owl-carousel').owlCarousel({
loop: true,
margin: 25,
nav: true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
autoplay: true,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
.carousel-wrap {
margin: 90px auto;
padding: 0 5%;
width: 80%;
position: relative;
}
/* fix blank or flashing items on carousel */
.owl-carousel .item {
position: relative;
z-index: 100;
-webkit-backface-visibility: hidden;
}
.owl-carousel .item iframe{
width:100%;
}
/* end fix */
.owl-nav > div {
margin-top: -26px;
position: absolute;
top: 50%;
color: #cdcbcd;
}
.owl-nav i {
font-size: 52px;
}
.owl-nav .owl-prev {
left: -30px;
}
.owl-nav .owl-next {
right: -30px;
}
<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">
<div class="carousel-wrap">
<div class="owl-carousel">
<div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>
<script src="https://use.fontawesome.com/826a7e3dce.js"></script>
You could use flexbox instead of float replacing:
.pn-Product_Contents {
float: left;
by this:
.pn-Product_Contents {
display: flex;
flex-direction: column;
For more info: https://www.w3schools.com/css/css3_flexbox.asp
I have a div with class 'card1' and 'card2' inside which there is a iframe used. I applied hover to 'card1' and 'card2' so that it go up when I hover but the issue is when I am hovering it's fluctuating.
You will easily understand it here : https://codesandbox.io/s/scapic-hovering-cards-34xif
I tried doing pointer-events:none to the class 'video' which is inside iframe and it works fine but as pointer-event:none works, it's disabling the events.
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.card1 {
border: 1px solid #cccccc;
position: relative;
width: 300px;
background-color: rgba(242, 242, 242, 0.5);
border-radius: 10px;
height: 200px;
z-index: 1;
margin-top: 60px;
top: 0;
transition: top ease 0.5s;
transform: perspective(260px) rotateY(-28deg);
}
.card1:hover {
top: -10px;
}
.card2 {
border: 1px solid #cccccc;
position: relative;
transition: top ease 0.5s;
width: 300px;
background-color: rgba(242, 242, 242, 0.5);
border-radius: 10px;
top: 0;
height: 200px;
transform: perspective(290px) rotateY(20deg);
}
.card2:hover {
top: -10px;
}
.video {
margin-top: 30px;
border-radius: 0 0 10px 10px;
}
<div class=container>
<div class="card1">
<div>
<iframe class="video" width="300" height="170"
src="https://www.youtube.com/embed/6oFvqLfRnsU" frameborder="0" a
llow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen></iframe>
</div>
</div>
<div class="card2">
<div>
<iframe class="video" width="300" height="170"
src="https://www.youtube.com/embed/R84JU3B0jqo" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen></iframe>
</div>
</div>
</div>
I want the card to stay stable when I hover and shouldn't fluctuate.
It will be a great help if anyone can help me out with this issue.
Please check this out.
I placed the card1 and card2 in two separate containers card1-container and card2-container and added the hover effects on them to get affected on card1 and card2
Also I removed the direct hover effects on card1 and card2
This seems to fix the issue for me. But you can do more research improve this.
Also, Check this question's answer
body {
font-family: sans-serif;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.card1-container:hover>.card1 {
top: -10px;
}
.card2-container:hover>.card2 {
top: -10px;
}
.card1 {
border: 1px solid #cccccc;
position: relative;
width: 300px;
background-color: rgba(242, 242, 242, 0.5);
border-radius: 10px;
height: 200px;
z-index: 1;
margin-top: 60px;
top: 0;
transition: all ease 0.5s;
transform: perspective(260px) rotateY(-28deg);
}
.card2 {
border: 1px solid #cccccc;
position: relative;
transition: all ease 0.5s;
width: 300px;
background-color: rgba(242, 242, 242, 0.5);
border-radius: 10px;
top: 0;
height: 200px;
transform: perspective(290px) rotateY(20deg);
}
.video {
margin-top: 30px;
border-radius: 0 0 10px 10px;
}
<div class="container">
<div class="card1-container">
<div class="card1">
<div>
<iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/6oFvqLfRnsU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- <iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/vFp2XjmoE3o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
</div>
</div>
</div>
<div class="card2-container">
<div class="card2">
<div>
<!-- <iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/mMHEqjsbR7E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-->
<iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/R84JU3B0jqo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
I've tried to solve your problem with a workaround.
What have I done? I've added two container box(one for card) between container and card. Now the event of the selector :hover is activated when your cursor is on the element div with the class trick-container.
How this solve the problem? When your cursor is on the element with the class trick-container the content inside the element is moved upper but not the element itself, in this way the selector event :hover isn't lost and the content isn't putted down.
HTML:
<div class=container>
<div class="trick-container">
<div class="card1-container">
<div class="card1">
<iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/6oFvqLfRnsU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- <iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/vFp2XjmoE3o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
</div>
</div>
</div>
<div class="trick-container2">
<div class="card2-container">
<div class="card2">
<!-- <iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/mMHEqjsbR7E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-->
<iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/R84JU3B0jqo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
CSS:
.trick-container {
padding-top: 60px;
transform: perspective(260px) rotateY(-28deg);
}
.trick-container2 {
height: 205px;
transform: perspective(290px) rotateY(20deg);
}
.card1-container {
border: 1px solid #cccccc;
position: relative;
width: 300px;
background-color: rgba(242, 242, 242, 0.5);
border-radius: 10px;
height: 200px;
z-index: 1;
top: 0;
transition: top 0.5s ease-in;
}
.trick-container:hover > .card1-container {
top: -10px;
}
.card2-container {
border: 1px solid #cccccc;
position: relative;
width: 300px;
background-color: rgba(242, 242, 242, 0.5);
border-radius: 10px;
height: 200px;
top: 0;
transition: top 0.5s ease-in;
}
.trick-container2:hover > .card2-container {
top: -10px;
}
You can check your reworked code here:
https://codesandbox.io/s/6zilz
Let me know if this solve your problem and/or if you've solved the problem in another way!
Also ask me for further explanation if needed.