Issues with CSS hover event causing animation to fail to trigger

I have a container that contains an image holder and a text holder. I am able to set it so that when hovered over, the image scales and the same effect applies to the text. However, when attempting to set up the image holder hover to scale the image and trigger a secondary action to scale the text as well, the hover animation does not work.

<div class="container">
    <div class="imageholder"><img></div>
    <div class="textholder"><text></div>
</div>

CSS
.imageholder:hover .textholder{
    transform: translatey(100%);
    transform: scale(1.1);
    transition: .5s ease;
}

Answer №1

Hello there, try updating your code with the following changes:

.imageholder:hover, .textholder:hover{
    transform: translateY(100%);
    transform: scale(1.1);
    transition: 0.5s ease;
}
<div class="container">
    <div class="imageholder">this is an image</div>
    <br/>
    <div class="textholder">this is some text</div>
</div>

Answer №2

Don't forget to include a comma in your CSS code as shown below:

.image-wrapper:hover, .text-wrapper:hover{
    transform: translateY(100%);
    transform: scale(1.1);
    transition: 0.5s ease;
 }

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

Permanent Solution for HTML Textbox Value Modification

https://i.sstatic.net/nB58K.pngI'm currently working on a GPS project where I am attempting to capture the altitude (above sea level) value in textbox1 and convert it into a ground level value displayed in textbox2. In this scenario, the GPS Altitude ...

Is it necessary for all elements of a web application to exist as React components?

It's been more than 2 years since I last worked with React, and revisiting my old code has left me feeling a bit confused. If I were to create an Instagram clone, would it be best to use HTML templates and inject JavaScript like this: <div id="rea ...

Updating the div#content dynamically with Jquery without the need to refresh the page

After spending countless hours on this forum, I have yet to find a solution that perfectly fits my needs, so I will pose my question. Here is the gist of what I am attempting to accomplish: When the page loads, the default page fades in and displays. Wh ...

Click to delete the <p> element

For the past few days, I've been struggling with this issue and have tried various approaches to solve it. However, I can't seem to remove the element for some reason. Can anyone offer some insight? My objective is to add the inputted markup on ...

Can a rotationX be applied within an existing rotationX?

I have a collection of 3 divs labeled a, b and c inside a container. The container is rotatedX by 90 degrees, giving the appearance that it is "lying on its back". Now, I am trying to rotate the a, b, and c divs so they appear to be "standing up" again. Ho ...

Incorporate custom styles into Joomla articles

Is there a way to apply custom styles to articles in Joomla without them getting deleted by the editor? <style> span{ color: #0099ff; } img{ float: right; } </style> <div> <h3> <span ...

The appearance of CSS can vary depending on the screen resolutions in which it is

I am encountering an issue with my HTML component that utilizes a booking engine. The parent width of the component is set, and the children elements inherit this width. There are three input fields and a search button within the component. The problem ari ...

Adding new data to a Chart.js line graph in vue on form submission - A step-by-step guide

I'm struggling with dynamically updating my line chart with new data. I want the chart to refresh every time a user submits a form with new data. Currently, I can add new data to the datasets array in the data function of App.vue, but the chart doesn& ...

Transfer files and data efficiently using Ajax

I am facing an issue while trying to send a file and data together to the Controller. When I only send the file, it works correctly. However, when attempting to send both data and a file, nothing seems to work. contentType: false, processData: false, Rem ...

Using TypeScript with Angular UI Router for managing nested named views in the application

Hey there! I am new to typescript and have a bit of experience with Angular. Lately, I've been struggling to make a common angular-ui-router setup work with typescript. I have a nested named views structure that just doesn't seem to load correctl ...

Are there alternative methods to improve the responsiveness of a column layout?

Check out this codesandbox I created to display my current status. When you change the column-count to three, a significant amount of information becomes hidden because it doesn't scroll. I've attempted using grid and flexbox layouts, but everyt ...

What is the best way to add an element when a checkbox is selected and delete it when it is dese

How can I display the text of selected elements and remove them when unchecked from a list of orders? When an element is checked, its value is added to the sum and its text is displayed. If it is unchecked, its text should be removed. Click here for the co ...

Is there a way for me to insert a variable into the src attribute of my img tag like this: `<img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`>`

I need assistance with passing a variable called snAvatarSnuid within the img src tag, specifically after facebook.com/ and before /picture as shown below: <img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`> Note: 1) The ht ...

Clicking on components that are stacked on top of each

I am facing an issue with two React arrow function components stacked on top of each other using absolute positioning. Both components have onClick attributes, but I want only the one on top to be clickable. Is there a workaround for this? Here is a simpl ...

Is there a way to click on a button and have its background color change randomly each time?

I am facing an issue with a button on my HTML page. When the button is clicked, I want its background color to change to a random different color. However, despite trying various sources, I am unable to get it right. It seems like I am not placing the code ...

What are some best practices for integrating CSS grid layouts with React for optimal results?

My current project involves developing a Single Page Application using ReactJs and CSS grid layouts for styling components. However, I've encountered an issue where the two technologies do not seamlessly integrate: CSS grid layouts are typically appli ...

Utilizing the DirectusImage tag for a stylish background effect

I'm new to Directus and I need help styling a card with a background image from a Directus Image. Can anyone guide me on how to achieve this? Here's what I have tried: <Card style={{backgroundImage:"url({someColletion.image.id})" &g ...

Comparison of universal and descending selector in CSS

Can someone clarify when to use the universal selector versus the descendant selector in CSS? I've tried finding a clear explanation, but haven't come across one that explains the difference and when each should be used: div * .test{ color: re ...

Manipulate audio files by utilizing the web audio API and wavesurfer.js to cut and paste audio

I am currently working on developing a web-based editor that allows users to customize basic settings for their audio files. To achieve this, I have integrated wavesurfer.js as a plugin due to its efficient and cross-browser waveform solution. After prior ...

Using jquery, transform json data into html table format

As a beginner in the realm of coding, I am currently experimenting with extracting data from my json file and transforming it into an HTML table. My tool of choice is the Atom code editor, and I am attempting to use JavaScript, specifically jQuery, to it ...