Tips for adding animation to the div instead of the content

I have implemented a hover animation to animate the div, but unfortunately, when I added the animation to #i :hover {}, it ended up animating the words only. Moreover, the cursor transforms into a pointer solely when hovering over the words instead of the entire div.

@keyframes hover {
  0% {bottom: 0px;}
  100% {bottom: 20px;}
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

#i {
    transition: 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 100, 0);
    width: 200px;
    height: 200px;
    font-size: 50px;
    text-align: center;
    font-family: sans-serif;
    border-radius: 10%;
}

#i:hover {
    position: relative;
    cursor: pointer;
    animation: hover 0.5s;
    bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div id="i"><strong>Hover</strong></div>
  </body>
</html>

Is there a way to modify it so that the entire div moves upwards on hover?

htmlcsscss-animations

Answer №1

By making the small adjustment of removing the space between #i and :hover, this code will now apply when an element that is a child of #i is hovered over.

#i:hover {
    position: relative;
    cursor: pointer;
    animation: hover 0.5s;
    bottom: 20px;
}

Answer №2

Remember, spacing is crucial in CSS

@keyframes hover {
  0% {bottom: 0px;}
  100% {bottom: 20px;}
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

#i {
    transition: 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 100, 0);
    width: 200px;
    height: 200px;
    font-size: 50px;
    text-align: center;
    font-family: sans-serif;
    border-radius: 10%;
}
 
#i:hover {
    position: relative;
    cursor: pointer;
    animation: hover 0.5s;
    bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div id="i"><strong>Hover</strong></div>
  </body>
</html>

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

Creating a virtual roulette wheel with JavaScript

I'm currently working on creating a roulette wheel using JavaScript. While researching, I came across this example: , but I wasn't satisfied with the aesthetics. Considering that my roulette will only have a few options, I was thinking of using ...

javascriptjqueryhtmlcss

Using jQuery to dynamically change the CSS color based on the background-color of a checkbox label

When a checkbox is selected, the function below runs to change the text color to white or black based on the darkness of the background color. However, the third checkbox should trigger this change to white but currently does not. function isDark(color) { ...

jquerycss

Using Android to Load HTML Content from a Database and Display in a WebView

I am currently facing an issue with loading HTML content from my sqlite database into a webview successfully. The HTML renders beautifully, however, the local file included in the HTML is not being loaded. I have placed it in the assets folder under this s ...

androidhtmlwebviewlocal-storage

Is there a way for me to retrieve the price using the xpath?

I have this code snippet currently: CurrentPrice=driver.find_element_by_xpath('/html/body/div[2]/div[4]/div[2]/header/div/div[3]/div[1]/div/div/div/div[1]/div[1]').get_attribute("title") This is the price data I am attempting to extrac ...

pythonhtmlweb-scraping

Tips for preventing a column from extending beyond the edge of the browser window during resizing

Issue arises when I resize the browser window, causing the left box to extend beyond the browser boundary, making it impossible to see the contents even with the scrollbar below. <!DOCTYPE html> <html lang="en"> <head> ...

htmlcss

Executing a component's method using HTML in Vue2

In my development project, there is a .vue file named ServiceList. This file imports the component called Information.vue. My objective is to execute the code from the Information component in a loop within the template of the ServiceList file. Here is an ...

javascripthtmlmethodsvue.jscomponents

Steps for assigning an id to a newly created div within a parent div while in design mode

Imagine creating a div element with the attribute contenteditable="true", and then checking the console for what happens next: 1st. In the console, you only see a simple div tag. <div id="typbody" contenteditable="true" style="width:100%; height:200px ...

javascriptphphtml

Replace the image source with a list of images

I am looking to create a dynamic image list using either an array or an HTML list. When I hover over an image, it should change one by one with a fade or slide effect, and revert back to the default images when I hover out. Question 1: What type of list s ...

javascriptjqueryhtmlcssimage

Tips for centering a flexbox on a webpage:

<template> <div> <div class="flex justify-center w-full"> <div class="h-px-500 md:w-1/6 bg-orange-200 text-center">1</div> <div class="h-px-500 md:w-1/6 bg-orange-300 text-center">2</div> <div clas ...

htmlcssvue.jstailwind-css

What is the best way to create an adaptive <pre> tag for ASCII art without using media queries?

Currently, my username is displayed as an ASCII art banner/header and I am looking to enhance its responsiveness. Instead of relying solely on media queries, I am exploring the possibility of making it scale within a CSS grid container. This approach would ...

htmlcsscss-grid

What is the best way to ensure that the viewBox of an SVG perfectly matches the size of the image it overlays?

I am looking to create a simple GUI using the Python NiceGUI Library. In my design, I have divided the interface into two columns using the grid element, with cards containing checkboxes on the left for overlays. On the right side, I have inserted an imag ...

pythonhtmlcssviewboxnicegui

Tips for shifting the cursor slightly to the right within an Input field

I created a div with an input field inside. I set the input field to autofocus, so when the page loads, the cursor is automatically focused on the input field. However, the cursor is touching the border of the input field, making it hard to see clearly. ...

htmlcss

Creating a dynamic dropdown menu using jQuery animation

I am looking to add animation to my top navigation bar. Currently, the dropdown menus just appear suddenly when hovering over the links in the top nav. Development site: I have attempted the following: <script> jQuery(document).ready(function() { ...

jqueryhtmlcssjquery-animate

Could you provide me with some information regarding the relationship between screen resolution and screen size?

When checking my website on different screen resolutions, I rely on a tool called Screenfly from quirktools.com. While using this tool, I came across an interesting feature - the display icon in the top left corner with a dropdown menu showing resolution ...

htmlcss

Is there a way to invert the orientation of an object within a canvas?

As I was experimenting with Javascript, I attempted to implement a feature where my 'Player' character would fall down after reaching a jumpDistance of 50. The idea was to simulate a small jump-like motion for the player. While the code may not ...

javascripthtml

Fetching JSON data using Javascript/JQuery

My goal is to access JSON data from an online web service that queries a MySQL database for a specific string and use Javascript to present it on an HTML page. My challenge lies in effectively displaying the retrieved information. The relevant part of my ...

javascriptjqueryhtmljsonget

What is the best way to increase the size of the input field to allow for more typing space?

My query is quite simple. Even when I set the height to 100px, the cursor still starts in the middle of the input box. I want the entire box to be utilized with the cursor starting at the top left corner for a more intuitive paragraph writing experience. ...

htmlcss

Menus that mimic the style of Google Translate's select options

I'm looking to design an HTML select menu using CSS in a similar fashion to Google Translate's style on Google Translate. I've searched for tutorials online, but they all involve jQuery. Is there a way to achieve something similar using only ...

javascriptjqueryhtmlcssdom

changing background color smoothly in a short time without using JQuery

Check out this link for some code .back { margin: 20px; padding: 100px; background: yellow; font-size: 30px; } <div class="back"> Fun place to stay. We got a golf cart to see the rest of the island, but the ...

htmlcss

What is the best way to incorporate the .top offset into a div's height calculation?

Looking to enhance the aesthetic of this blog by adjusting the height of the #content div to match that of the last article. This will allow the background image to repeat seamlessly along the vertical axis. I attempted the following code: $(document).re ...

javascriptjqueryhtmlcss