Triggering an animation on one element by hovering over a different element

I'm trying to create a cool effect where the train ticket rotates when I hover over a leaf.

Although I can get the train ticket to rotate when I hover over it directly, it doesn't seem to work when I hover over the leaf. Can someone help me spot what's wrong with my code?

This is what I have in my CSS file:

#leaf{
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
     -ms-transition: all 1s ease;
    transition: all 1s ease;
    }
#leaf:hover ~ #trainticket {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    rotate(90deg) scale(1.5) skew(45deg) translate(0px);
    -webkit-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
    -moz-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
    -o-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
    -ms-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
    }

#trainticket{
    display:block;
    position: fixed;
    left:0px;
    bottom:0px;
    width: 350px;
    height: 175px;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

#trainticket:hover{
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    rotate(90deg) scale(1.5) skew(45deg) translate(0px);
    -webkit-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
    -moz-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
    -o-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
    -ms-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
    }

And this is the relevant part of my HTML file:

<div>
      <a target="bio" href="bio1.html">
      <img ID="leaf" src="leaftrans1.png" 
      style="position:absolute;
      display:block;
      top: 30px; 
      left: 30px; 
      width:10%; 
      height:10%;"></a>

    <div>
      <img ID="trainticket" src="current-train-ticket.jpg">
   </div>

</div>

Answer №1

For more intricate animations, it is advisable to utilize JavaScript (such as jQuery). Implementing an animation on one element when hovering over another can be quite complex and may warrant the use of jQuery. In my view, CSS may not be the most suitable option for this type of task, at least currently. You might find yourself resorting to various workarounds to achieve the desired outcome and ensure cross-browser compatibility.

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

The issue of duplicate backgrounds appearing on the burger menu when adjusting the height

There seems to be an issue with my burgermenu; when I attempt to adjust the height, the background-color ends up duplicating. .bm-menu { background-color: rgba(255, 255, 255, 0.9); height: 60vh; position: fixed; transition: top 0.3s; to ...

Changing button alignment using CSS to create a new line

Currently, I am working on a React project using Material-UI where I am trying to create a numpad. The code snippet below showcases part of my implementation: // some parts are omitted for conciseness const keys = [7, 8, 9, 4, 5, 6, 1, 2, 3, 0]; ...

CSS - Layering new DIVs over existing DIVs

My goal is to implement "vertical-align: bottom;" in order for the DIVs to align from the bottom of the wrapper/parent DIV to the top. However, I am facing an issue where I want the first DIVs to be displayed at the bottom, rather than at the default top p ...

Learn how to integrate Bootstrap with Vue.js TreeView in this tutorial

If you're looking to create a treeview using Vue.js, the code structure would resemble something like this: HTML: <!-- item template --> <script type="text/x-template" id="item-template"> <li> <div ...

Transition in the background color of a button while the superfish menu gracefully drops down

I am currently using a customized drop down menu created with Superfish. My goal is to incorporate an independent fade-in effect for the drop down menu. The background color should change on mouseover and the drop-down box should fade in gradually. You ca ...

Arrange a div close to another div with the help of absolute positioning

My goal is to create a tooltip-like positioning for an element within the same container as another element. When clicked, this particular element will display a div containing a table. You can find the complete code here: http://jsbin.com/xihebol When s ...

Looking for a Horizontal Layout?

@foreach (var item in APModel) { <div class="row row-cols-1 row-cols-md-2 g-4"> <div class="col"> <div class="card" style="width: 18rem;"> <img src="h ...

CSS <ul> <li> spacing issue in Internet Explorer 7

My CSS <ul> <li> nested menu is functioning perfectly in IE 8 and Firefox, but in IE7 it is creating a small gap between the elements. Here is my CSS: #nav, #nav ul { margin: 0; padding: 0; list-style-type: none; list-style-po ...

Persistent column menu in ag-grid

Is there a way to include a menu for each row within a sticky column in Ag-grid? I couldn't find any information about this feature in the official documentation, so I'm unsure if it's even possible. I've attempted several methods, but ...

Unable to create a clickable button within a CSS3DObject using Three.js

How can I create an interactive button on a CSS3DObject within a cube made up of 6 sides? The button is located on the yellow side, but I'm facing issues with clicking on it. Whenever I attempt to click on the button, the event.target always points to ...

Use jQuery's animate function to toggle a different div when clicking on one

Having trouble with a jQuery function that keeps triggering the second function every time I click. How can I fix this issue? I designed a navbar with 3 links, each linked to a different .contentDiv with unique IDs. Whenever a link is clicked, a toggle fu ...

Tips for aligning inline elements in the center of a webpage

My goal is to center the title in the middle of the page, taking into account its alignment with the search bar. However, I want it to be centered independently and not affected by the search bar's position. Is there a way to achieve this? To better ...

Update the text on the Bootstrap modal label before it is clicked

I am currently working on implementing a Bootstrap modal with a label control. The modal is triggered by clicking a button, and I am facing an issue where I need to change the text of the label before the modal launches. However, the text that is supposed ...

Achieve this effect by making sure that when a user scrolls on their browser, 50% of the content is entered into view and the remaining 50%

Is there a way to achieve this effect? Specifically, when the user scrolls in the browser, 50% of the content is displayed at the top and the other 50% is shown at the bottom. ...

Arrangement of elements in Bootstrap

Is there a way to prevent my frame from overflowing compared to its parent class when using bootstrap's row class? How can I address this issue? https://i.sstatic.net/gR7Ep.png Here is my code: html: <div class="container"> <div cla ...

The list in the navbar is misaligned and not centered vertically within the flex container

I've been working with flex for a while now, but I'm struggling to vertically align the content of my navbar to the center in the code. <nav className="nav navbar"> <h3> Logo </h3> <ul className= &q ...

What's the Best Way to Add a Border to My Two-Column Form?

I'm currently working on a reservation form for my website with a 2-column layout. In one column, I have tables, and I've been trying to add a divider between the columns but haven't found a solution yet. Despite researching ways to add a d ...

Tips to avoid the page from scrolling to the top when the menu is opened

Whenever a user taps the menu button on the page, a full-page menu opens. However, there is an issue - the main content page automatically scrolls to the top. Can you provide suggestions on how to prevent this from happening? I have already looked into a s ...

Having trouble with the Tooltip feature in Bootstrap versions 5.2 and 5.3 on my end

I've been working on building an HTML website using Bootstrap 5.2, and I followed the instructions in the Bootstrap documentation to add tooltips. However, I encountered an issue where the tooltips were not functioning as expected. When checking the ...

Is there any HTML code that is able to implement a currency format identical to the one we've customized in Google Sheets/Google Apps Script

I am currently working with a Google Sheet table that consists of 2 columns. The second column contains charges which can vary based on user input through a Google Form and are summed up using GAS. To view an example, click here. The data from this Googl ...