HTML - Transition an image to a short video on hover

Currently, I am attempting to create a dynamic list of images where hovering over one of the images triggers a short video to play. Think of it as similar functionality to what you see on Youtube - when you hover over an image, it switches to a brief video; then, when you move away from the image, it reverts back to its original form.

I'm wondering how I can accomplish this task. Which tools or technologies should I utilize? Is it feasible to achieve using Javascript? Are there any existing libraries or open-source packages that could assist me in this endeavor?

I feel a bit overwhelmed by the process and have spent considerable time researching possible solutions.

htmlcss

Answer №1

Place each image within its own div container. Include an onmouseenter and onmouseout attribute in each div to detect when the user's mouse enters or exits the element:

<div id = "0" onmouseenter = "showVideo(this)" onmouseout = "showImage(this)">
<img>
</div>

Next, define the functions showVideo and makeImage:

<script>
   pairs = [["<img src = 'example.png'>","<video autoplay><source src='example.mp4' type='video/mp4'></video>"]] // array pairing image elements with videos

showVideo = function(element){ 
   element.innerHTML = pairs[element.id][1] // display corresponding video string based on the div id
}

showImage = function(element){ 
   element.innerHTML = pairs[element.id][0] // display corresponding img string based on the div id
}
</script>

Repeat this process for additional images needed. Remember to set the width and height attributes of your videos equally. Assign a unique id to each div matching its index in the pairs array. Creating the html strings for the pairs array may be time-consuming. Best of luck implementing this!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for ensuring that one table column matches the width of another column

Is there a way to allow column 3 in my dynamically populated table to have a flexible width while enforcing that column 4 matches the width of column 3? ...

htmlcssbootstrap-4

Media queries in IE9 for CSS with specific conditions based on the height of

We are implementing a CSS media query to adjust styles for mobile devices, specifically increasing the height of select elements for easier selection. Here is an example: @media only screen and (max-width: 599px) { .mySelect { height: 40px; ...

htmlcssinternet-explorer-9media-querieshtml-select

Unique CSS Styles for Border Radius

Is there a way to achieve rounded corners on only the top left and top right, but not on the bottom two corners of a div using a specific value for -webkit-border-radius? ...

htmlcss

uniformly distribute the list items on the horizontal navigation bar

Does anyone know how to properly space out a ul in a navigation bar, with 5px padding on the right and left and the text evenly spaced in between? body { background: #ffffff; text-align: center; font-family: helvetica, arial, san ...

htmlcsshtml-listsmargin

Adding design elements to HTML 5 components

Are there any potential downsides to applying CSS to the <section>, <header>, <article>, and <footer> elements? I vaguely remember reading somewhere that these elements should not be styled, but I can't seem to locate the sourc ...

csshtml

Navigating the style properties using jQuery loops

I have an event listener for a click on a specific div. $('div').on('click', function() { var styles = $(this).attr('style').split(';'); $.each(styles, function(i) { var style = this.split(':&ap ...

javascriptjqueryhtmlcss

What is the best way to selectively add multiple classes to a single Material UI classes attribute based on certain conditions?

I am trying to use the Material UI Drawer and wish to add a class named "paperStyle" to the classes prop with the rule name "paper" and then, under certain conditions, apply an additional class called "specialPaperStyle" for specific users. However, I have ...

cssreactjsmaterial-ui

Proportional fluid image grid with responsive design

After implementing various media queries, I've managed to create an image grid using Bootstrap 4+ that looks great on specific devices and layouts. Here's the reference code: .cmd-three-img-container { position: relative; margi ...

javascripthtmlcssflexboxbootstrap-4

What is the best way to display an image and text side by side within a single row in react-table?

I am trying to display an image and text side by side within a single column in a React table. I have successfully added two texts together in a single column using the code below: Header: "Name", id: "User", accessor: (d) => ...

javascripthtmlreactjsnext.jsreact-table

Obtain the URL of the hyperlink when clicked

After the scenario described above, I am looking to have a user click on a hyperlink and then have it copied into a PHP variable. Is this achievable? I attempted the following but it doesn't seem to be working. Any suggestions? Code: <script ...

phphtml

How to eliminate the Horizontal ScrollBar in Telerik RadTextBox specifically for IE users

How can I prevent a TextBox control from overflowing and displaying a horizontal scroll bar without using javascript? I have already tried Wrap="true" along with other methods, but to no avail. <telerik:RadTextBox ID="tx_Subj" Runat="server" TextMod ...

asp.netcsstelerik

Error in saving webpage as HTML

I have integrated FileSaver.js into my project to enable users to save web pages as HTML. The code below is triggered when a user clicks on the download button: var originalstr=$.ajax( { type: "GET", url:"url", async: false }).resp ...

javascriptjqueryhtmlajaxfilesaver.js

Navigate down the page until you reach the section that is set to display as a block

Is it possible to make the page automatically scroll to a specific element located in the middle of the page when changing its display property from none to block? ...

jquerycss

AngularJS making a HttpPost request resulting in a 500-Internal Server Error

I'm currently working on an application where I need to include a user in the database which requires a POST operation. However, every time I try to run the application, I encounter a 500-Internal Server Error for the POST API call. Here is a snippe ...

javascripthtmlangularjsasp.net-mvcasp.net-web-api

Durable Container for input and select fields

I need a solution for creating persistent placeholders in input and select boxes. For instance, <input type="text" placeholder="Enter First Name:" /> When the user focuses on the input box and enters their name, let's say "John", I want the pl ...

javascriptjqueryhtmldomplaceholder

Refreshing pane content within Kendo UI Splitview

I am utilizing the Kendo UI splitview. In my setup, I have configured one pane on the left for navigation and another pane on the right for content display. The left pane contains 4 navigation links structured as follows: <div data-role="pane" id="si ...

javascriptjqueryhtmlkendo-ui

The Bootstrap dropdown functionality is not working properly and fails to open when clicked

Can anyone help with this Navber code issue? <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #FDFEFF;"> <div class="collapse navbar-collapse justify-content-center" id="navbarNav"> <a class="navbar-brand" ...

htmlcss

Creating artwork: How to resize images without losing clarity

Struggling to display an image in a canvas element that needs to be a certain percentage of its parent container's width. Despite my efforts, the image seems to blur once added to the canvas, which is not the desired effect. I attempted to disable th ...

javascripthtmlcsscanvas

File uploading feature in Bootstrap (without the need for Javascript)

While I've seen this question posted in a similar style before, one critical point (in my opinion) hasn't been addressed - is there a way to achieve this without using JavaScript? On mobile devices, overscripted sites can sometimes have non-worki ...

htmlcsstwitter-bootstrap

Problems encountered with dragging elements in Firefox

Is there a reason why an image may not be draggable in Firefox even when the draggable="true" attribute is set? I am working on a JavaScript image swapping script and encountering difficulties with drag-and-drop functionality specifically in Firefox. While ...

javascriptjqueryhtmlfirefoxdrag-and-drop