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.
I am trying to create a jqgrid table with three footer rows to display a total at the end of each grid. Following the guidance in this helpful post from Oleg on How to create two footer rows in jqgrid, I was able to modify the code provided to show three t ...
Having trouble setting up Open Graph meta tags for a website? Even though the tags appear in the source when accessed through a browser, they don't show up in the OG debugger. The website I'm currently working on is located at spurafrika-org.ver ...
I have a div named "navbar_menu". On clicking this div, I want the visibility of the div named "nav_overlay" to fade in. Upon another click, I want it to fade back and become invisible again. Currently, I have set the div 'nav_overlay" to have ' ...
To create a design using html and css to display numbers in an image counter related to a carousel, follow these steps: https://i.stack.imgur.com/OBAHd.png I'm encountering an issue where I need to add a line break in the "content" so that the .down ...
Hi everyone, I'm a newcomer to the world of JS and jQuery. Recently, while examining the code in carousel.js, I stumbled upon this particular line: this.cycle(true) The cycle function is structured like this: Carousel.prototype.cycle = function ...
After using NetBeans for a while, I am now considering making the switch to Eclipse. Everything seems fine, but one thing that is bothering me is that Eclipse does not provide CSS class proposals like NetBeans does. In NetBeans, whenever I use or create a ...
Currently, I have implemented a red pseudo element as part of the background for certain sections on my website. Although everything is functioning correctly, I am interested in transitioning the straight line to a curved one instead. Does anyone know ho ...
Having trouble with this code: if($('#primayins').prop('checked')) { $("#tx_nm0x0_pricingplan").val(1); } else { $("#tx_nm0x0_pricingplan").val(2); } It keeps returning false consistently ...
When using react-number-format with Material UI Textfield, I'm attempting to set a maximum value of 100 for my field. Numbers above 100 should not be allowed. How can this be achieved using the HTML attribute: min? import InputAdornment from "@ma ...
When I make an API call, I am receiving X and Y coordinates in the following format: x: "-0.0120956897735595703" y: "0.147876381874084473" To display these coordinates on my minimap images, I have set their display to be absolute. The "left" and "top" pr ...
Has anyone come across a reliable javascript library that can retrieve the original style (not computed) of a specific element in the DOM? Essentially, I am looking for something that can provide results similar to what is displayed in Firebug's style ...
Can you generate stylish text using just CSS in HTML? Check out this link for a great demonstration of fancy text. ...
Welcome I am embarking on a project to construct a webpage using HTML, CSS, JavaScript (jQuery), and nearly 1000 images. The length of the HTML page is substantial, around 5000px. My vision involves creating a captivating visual experience for users as t ...
I recently came across this amazing jQuery plugin for creating slide-out and drawer effects: However, I encountered a problem. I want to automatically close the active 'drawer' when the mouse is not hovering over any element. The jQuery plugin c ...
I have a query regarding the utilization of Angular. I aim to align the sentences side by side. These are two distinct components that I developed. I wish for recipe-list and recipes-details to function properly, with both statements displayed alongside ...
Can anyone help me with creating an onclick event that triggers when the user clicks on the first list item which is labeled as "Any Date"? I am looking to use jQuery to target this specific element. <ul id="ui-id-1" class="ui-menu ui-widget ui-widge ...
I have searched through various questions and the Bootstrap documentation but haven't been able to determine the purpose of these classes on elements. Any assistance would be greatly appreciated! My goal is to adjust my search bar's size to 1/4th ...
How can I make a hyperlink in an HTML document that opens the linked document (link1.html) under the link on the same page? links.html: <body> <h3>Links</h3< <a href="link1.html">link1</a> </body> Desired out ...
After updating to the latest version of Presta Shop, I encountered an issue. When I inserted the following code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> jQuery(document).ready(function(){ ...
This particular problem is specific to the Microsoft Edge browser. I am attempting to apply a CSS style to a selected word using Range API's, but I am encountering an issue with the range.endOffset functionality in Edge. Below is the code snippet I am ...