I’m not good at English but I will try to explain better.
<!-- FILM -->
<!-- CONTAINER FILM -->
<div class="container-fluid text-white">
<!-- RIGA FILM -->
<div class="row">
<!-- COLONNA FILM -->
<div class="col-11 fs-5 pt-3" style="margin-left: 35px;">
<strong style="color: #fd0167;">Film</strong> / NovitÃ
</div>
<!-- IMMAGINI CON I RISPETTIVI LINK -->
<div class="col-11 d-flex justify-content-between" style="margin-left: 50px; margin-top: 20px;">
<a href="page3.html">
<img id="myImg" src="img/carousel/comedy-shot.png"
class="d-block" width="250" alt="Commedia" title="Clicca qui per vedere il film commedia">
<video id="myVideo" src="video/video.mp4"
style="display: none; width: 250px; position: absolute; top: 90px;"></video>
</a>
<a href=" page3.html"><img src="img/carousel/dramatic-shot.png" class="d-block" width="250"
alt="Drammatico" title="Clicca qui per vedere il film drammatico"></a>
<a href="page3.html"><img src="img/carousel/matrix-shot.png" class="d-block" width="250" alt="Matrix"
title="Clicca qui per vedere il film Matrix"></a>
<a href="page3.html"><img src="img/carousel/action-shot.png" class="d-block" width="250" alt="Azione"
title="Clicca qui per vedere il film Azione"></a>
<a href="page3.html"><img src="img/carousel/starwars-shot.png" class="d-block" width="250"
alt="StarWars" title="Clicca qui per vedere il film Star Wars"></a>
</div>
</div>
</div>
<!-- FINE FILM -->
This is my HTML code and HOW can I do that the image will be hovered with the video? “WDYM” you will say. I’ll explain better. I have multiple images and you can notice, now I need that each image (that have different positions each) have the hover effect that will change in video with the same width of the image (all images have the same width, 250px) I repeat, but the positions of the image are different. For positions I am saying (just an example):
Image 1: X: 10 Y: 10
Image 2: X: 20 Y: 15
Image 3: X: 25 Y: 40
// And others…
(In this case I’m using Bootstrap 5.3 that have the columns with d-flex and justify-content-between)
But I do not need only video, do you have present that card layout? Image (in my case the video), texts (title and a paragraph) and optionally a button that says “Play” with the icon of play. And if is out of the range of hovering (so outside of the video) will return the original image.
Hope you understood and if you do not understood the question that I made, just comment.
Have a good day.
Languages:
HTML, CSS and JS