My image and videos are blurred whenever they are hovered over. Now, I also want them to both blur and display text whenever I hover over. I have tried to use hover for both but only the blur part is applicable so far. I also want the text to be able to resize accordingly with the video box so that when scaling down, it will resize accordingly. Thank you very much !
Code so far:
html{
margin:0;
padding: 0;
font-size:62.5%;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: grayscale;
}
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1rem;
z-index: 100;
}
.wrapper1{
display:flex;
flex-direction: row;
justify-content: flex-start | center | flex-end;
margin: 0;
height: 100%;
width:100%;
}
h4{
display:block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-family: 'Roboto Mono', monospace;
z-index:50;
}
.type2{
text-align: left;
margin-left: 10rem;
margin-right: 10rem;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
body{
margin:0;
padding: 0;
width: 100%;
}
.main{
padding:0;
margin:0;
}
.wrapper{
overflow-y:hidden;
overflow-x:auto;
margin: 0;
height: 100%;
width:100%;
}
@media only screen and (max-width: 1000px){
.type2{
display: none;
}
.type1{
font-size: 24px;
}
}
video{
display: block;
margin-bottom: 1em;
object-fit: contain;
}
.main-section{
display:flex;
flex-direction: column;
align-items: center;
position: relative;
padding: 0;
margin: 0;
top: 25%;
}
.main-section div{
flex:1;
}
.vid_vertical{
position: absolute;
height: auto;
width: 20%;
}
.vid_1{
position: absolute;
left: 25.5%;
z-index: 1;
}
.vid_1:hover {
filter:blur(10px);
}
.type_ins: hover{
display: block;
}
.type_ins{
font-size: 0.7vw;
position: absolute;
left: 30%;
z-index: 50 !important;
text-align: center;
display: none;
}
.vid_2{
positon: absolute;
left: 50% ;
z-index:2;
}
.vid_3{
positon: absolute;
left: 148% ;
z-index:3;
}
.vid_4{
positon: absolute;
left: 74% ;
z-index:3;
}
.vid_5{
positon: absolute;
left: 98% ;
z-index:3;
}
.vid_6{
positon: absolute;
left: 122.5% ;
z-index:3;
}
.img1{
position: absolute;
height: auto;
width: 20%;
left: 0;
z-index:0;
}<html>
<head>
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta charset="utf-8">
<link rel="stylesheet" href="Interactive story.css">
<title>Interactive Storytelling</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="wrapper1">
<div class="type1">
<h4>2019</h4>
</div>
<div class="type2">
<h4>I came to Toronto in August 2018 so we (me and my friend)
adopted Hershey when we were still in our first year. <br>
Before adopting Hershey, we nearly got scammed by buying a dog with a cheaper price so we decided to adopt rather than buying.<br>
She was actually our second choice, the first one having a lot of medical issues so we had to move on.<br>
I think she chose us actually because of all the people who wanted her, we were the only one whom she didn't hiss at. </h4>
</div>
</div>
</div>
<section>
<div class="wrapper">
<div class="main-section">
<video class="vid_vertical vid_1" autoplay loop muted preload playsinline>
<source src="IMG_1362.mp4" type="video/mp4">
</video>
<video class="vid_vertical vid_2" autoplay loop muted preload playsinline>
<source src="IMG_1364.mp4" type="video/mp4">
</video>
<video class="vid_vertical vid_3" autoplay loop muted preload playsinline>
<source src="IMG_1832.mp4" type="video/mp4">
</video>
<video class="vid_vertical vid_4" autoplay loop muted preload playsinline>
<source src="1080p.mp4" type="video/mp4">
</video>
<video class="vid_vertical vid_5" autoplay loop muted preload playsinline>
<source src="IMG_1381.mp4" type="video/mp4">
</video>
<video class="vid_vertical vid_6" autoplay loop muted preload playsinline>
<source src="IMG_1391.mp4" type="video/mp4">
</video>
<img src="IMG_1275_2.jpg" class="img1">
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="Interactive story.js"></script>
<!-- <section>
<div class="wrapper">
<div class="vid">
<iframe id="vid_vertical" class="vid_2" autoplay loop muted preload playsinline>
<source src="IMG_1363.MOV" type="video/mp4">
</iframe>
</div>
</div>
</section> -->
</body>