I am looking to create a hovering effect on an autoloop video similar to what is seen on this website -
This specific section of the website demonstrates the effect I am trying to achieve.
Prior to hovering, the autoloop video has an overlay displayed on top of it.
Upon hovering, the overlay should disappear and the video will slightly enlarge.
Can anyone provide guidance on how to implement this hovering effect?
Here's a touch of CSS sorcery:
.video-frame {
width:150px;
height:150px;
background:#c90;
transition: all 0.5s ease-out;
position:relative;
}
.video-frame::after {
content: " ";
width:100%;
height:100%;
background: rgba(0,0,0,0.5);
position:absolute;
top:0;
left:0;
transition: all 0.5s ease-out;
pointer-events: none;
}
.video-frame:hover {
transform: scale(1.2,1.2);
}
.video-frame:hover::after {
opacity:0;
}<div class="video-frame">
Your video goes here
</div>I have put together a FIDDLE to demonstrate how you can utilize the scale property to adjust the size of your video as well as control its opacity.
HTML:
<iframe width="560" height="315" src="https://www.youtube.com/embed/ie-C7DQVNKw" frameborder="0" allowfullscreen></iframe>CSS:
iframe {
transform: scale(1, 1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
iframe:hover {
transform: scale(1.1,1.1);
filter: alpha(opacity=80);
opacity: 0.8;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
}
Explanation:
In this example, there are two key features:
Upon hovering over the video, the iframe is scaled to (1.1 , 1.1), resulting in a 10% increase in size in both dimensions, along with applying an opacity effect.
In my current project, I am working with 2 CSS files. The first one serves as a "default" style sheet that is used in all websites created from the same templates. The second file contains the specific styles for our application. Both of these files are in ...
Having some trouble converting HTML to PDF as the images in the HTML are not showing up in the PDF file. pom.xml <dependency> <groupId>org.xhtmlrenderer</groupId> <artifactId>flying-saucer-core</artifactId> <v ...
I am trying to create a table with vertical scrolling for the entire table content. Additionally, I need two columns within the table to be scrollable horizontally, but the horizontal scrollbars disappear when the vertical scrollbar is present. How can I k ...
I'm struggling to grasp the concept of how divs function in HTML. Below is a snippet of my HTML code: <div id="user_p"> <img src="img/pp/djbaptou.jpg"> <div class="followings"> djbaptou </br> Baptiste Arnaud </br> ...
I have integrated the jquery ubergallery into my website, and I am trying to add a new div below the main photos for additional content such as share buttons and comments. I tried using the code that worked with colorbox, but since ubergallery uses colorbo ...
Is there a way to showcase my categories with different background colors using a custom post type? I want to link the slug name from my taxonomy to serve as the class attribute for a span element and style it with CSS. However, I am encountering issues wi ...
Is there a way to create a responsive div similar to the img-responsive class in Bootstrap, but for a div element that changes its height relative to its width when the window size is adjusted? For example, if you look at the slider on this website "", yo ...
After wrapping them in divs and adding inline-block to both elements to display them side by side, I'm now exploring options to switch their positions. Specifically, I'd like the right element to be on the left. Any ideas on how to achieve this? ...
I am working on a project where I need to set a default month and year that the user cannot modify. They should only be able to change the date in December months. Any tips on how I can achieve this? <input id="input_date" type="date&qu ...
Below is some Bootstrap 5 markup that I need help with. The first example is incorrect. I don't want the Bootstrap input to be the same height as the grid cell. The second example is right, but I want to achieve the same result without using a wrapp ...
I am currently in the process of redesigning a website for a client. The site is already built using Joomla 1.7, but I am facing an issue with the articles section that was created by the client using a WYSIWYG editor. The problem lies in the messy code st ...
Description: I am trying to prevent text overflow in a table cell and position the text underneath a header without wrapping it under an image. I have tried setting a static width for the image and adjusting the left property, but it is not working as expe ...
body { background-color: #000000; background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Aurigids_-_Jeremie_Vaubaillon.jpg/1280px-Aurigids_-_Jeremie_Vaubaillon.jpg'); background-repeat: no-repeat; background-attac ...
Currently, I am working on implementing a basic form validation feature, but it is not functioning as intended. The desired behavior is for the field border to change color to green or red based on its validity, while displaying text indicating whether t ...
Is there a smart method to load just a segment of a page using Node.js and Jade?: I'm in the process of creating a music blog and I want to incorporate a seamless player at the top of each page. The goal is for the player to keep playing without inte ...
Here's the HTML markup I'm working with: <picture> <source srcset="img/home-page/placeholders/placeholder_2560.jpg" media="(max-width: 2560px)"> <source srcset="img/home-page/placeholders/placeh ...
I've been delving into the world of jQuery, asking numerous questions and providing some answers as a beginner myself. Currently, I have a good understanding of how to utilize jQuery for tasks such as adding CSS styles to a div and inserting text into ...
I'm facing an issue with my hero section that is supposed to take up the full height of the viewport. I recently tried using the new svh/lvh units, which seemed to work fine on desktop and Safari for mobile. However, when testing on Chrome for mobile ...
I attempted to apply styles to two components in order to create space between them, visible on both larger and smaller displays. The code snippet appears as follows: <div> <CustomPageHeader pageTitle={t('offersPage.pageHeader')} ...
Exploring the capabilities of Cucumber with Protractor has been an intriguing journey for me. As I delved into creating a feature in Gherkin language, outlining the steps and scenarios necessary for my end-to-end tests, a new world of possibilities opened ...