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 >
<div >
<div >
<div >
<h4>2019</h4>
</div>
<div >
<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 >
<div >
<video autoplay loop muted preload playsinline>
<source src="IMG_1362.mp4" type="video/mp4">
</video>
<video autoplay loop muted preload playsinline>
<source src="IMG_1364.mp4" type="video/mp4">
</video>
<video autoplay loop muted preload playsinline>
<source src="IMG_1832.mp4" type="video/mp4">
</video>
<video autoplay loop muted preload playsinline>
<source src="1080p.mp4" type="video/mp4">
</video>
<video autoplay loop muted preload playsinline>
<source src="IMG_1381.mp4" type="video/mp4">
</video>
<video autoplay loop muted preload playsinline>
<source src="IMG_1391.mp4" type="video/mp4">
</video>
<img src="IMG_1275_2.jpg" >
</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 >
<div >
<iframe id="vid_vertical" autoplay loop muted preload playsinline>
<source src="IMG_1363.MOV" type="video/mp4">
</iframe>
</div>
</div>
</section> -->
</body>CodePudding user response：
You’ll need to have the text you want to show in the DOM first. You’ll probably also need to add a <div> wrapper around the <video>, because even though your hover effect works, <video> is a special element meant for playing videos and doesn’t support all interactions a more generic element can.
<div >
<video >…</video>
<div >My text</div>
</div>
.vid_1_text {
left: 0;
opacity: 0;
pointer-events: none; /* don’t block video clicks */
position: absolute;
transition: opacity 150ms linear;
top: 0; /* adjust "top" and "left" to taste */
}
.vid_1_wrapper {
position: relative;
}
.vid_1_wrapper:hover .vid_1 {
filter: blur(10px);
}
.vid_1_wrapper:hover .vid_1_text {
opacity: 1;
}
By moving the :hover pseudoclass to a wrapper element, you can trigger multiple effects with the same interaction, including blurring the video and showing text at the same time.
This is just an example using your classes; to improve on this you’ll probably want to use more generic classes like .video and .video-text so you can reuse them.
CodePudding user response：
Wrap the image and the "appear on hover" description in a div with the same dimensions of the image. Then, with some CSS, order the description to appear while hovering that div.
/* quick reset */
* {
margin: 0;
padding: 0;
border: 0;
}
/* relevant styles */
.img__wrap {
position: relative;
height: 200px;
width: 257px;
}
.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
opacity: 0;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.img__wrap:hover .img__description {
visibility: visible;
opacity: 1;
}
<div >
<img src="http://placehold.it/257x200.jpg" />
<p >This image looks super neat.</p>
</div>