Change from full manual control to automatic mode

Here is the link to my code: http://jsfiddle.net/yHPTv/2491/

I am experiencing an issue with the transition effect. The hidden element is supposed to slide into view from the right edge of the .block element, but instead, it just appears suddenly.

.block {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
  background: lightgrey;
}
.block .hidden {
  background: red;
  padding: 3px 10px;
  position: absolute;
  bottom: 0;
  left: 100%;
  transition: 1s;
}
.block:hover .hidden {
  transition: 1s;
  left: auto;
  right: 0;
}
<div class="block">
  <div class="hidden">ABCDEFGHIJKL</div>
</div>

I suspect that the issue lies with the left: auto property. When I change it to left: 50%, it sort of works, but not exactly as desired.

Any insights would be greatly appreciated.

javascriptjqueryhtmlcss

Answer №1

It is not possible to animate from % to auto, but you can achieve the desired effect using the transform property. Consider the following code snippet:

.box .hidden {
    background: blue;
    padding: 5px 15px;
    position: relative;
    top: 0;
    left: 0;
    transform:translateY(100%);
    transition: 1s;
}

.box:hover .hidden {
    transition: 1s;
    transform:translateY(0)
}

View the Demo Fiddle Here

Answer №2

Let's explore a transition effect to the right, starting from -100% and ending at 0:

.element {
    position: relative;
    width: 500px;
    height: 150px; /* adjusted for visibility */
    overflow: hidden;
    background: lightgrey;
}

.element .hidden-content {
    background: red;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    right: -100%;
    transition: 1s;
}

.element:hover .hidden-content {
    right: 0;
    transition: 1s;
}
<div class="element">
    <div class="hidden-content">ABCDEFGHIJKL</div>
</div>

Answer №3

In order for a transition to be effective, you must specify the property you want to change in both states of the element. The example provided did not work because there was no shared property between '.hidden' and ':hover' (the 'left' property was set in '.hidden', while the 'right' property was set in ':hover').

To make it work, try using code like this:

.block {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
    background: lightgrey;
}

.block .hidden {
    background: red;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    right: -100%;
    transition: 1s;
}

.block:hover .hidden {
    transition: 1s;
    right: 0%;
}

This will work because we have defined the 'right' property in both states ('.hidden' and ':hover').

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

Displaying two images side by side in HTML using Bootstrap

As a beginner in HTML, I am faced with the challenge of placing two images of different sizes side by side on the same row using HTML and Bootstrap. Below is my current code: <div class="row"> <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6"> ...

jqueryhtmlcsstwitter-bootstrap

Customize the background color of MaterialUI KeyboardDateTimePicker without altering the padding and layout of the component

Is it possible to alter the background color of KeyboardDateTimePicker components without affecting the padding and layout? I attempted to set the background property to style={{background: "rgb(232, 241, 250)"}}, but when combined with inputVari ...

javascriptreactjsmaterial-uibackground-colorstyling

CriOS unable to recognize OPTIONS request from Tomcat 8

My application uses POST requests with CORS for backend services (from www.mydomain.com to api.mydomain.com). The backend is served by a Tomact8 server, implementing a CORSResponseFilter as shown below: public class CORSResponseFilter implements Container ...

javascriptjavaajaxtomcatcors

Dynamic JavaScript Total Calculation

I have been struggling to update the total price for specific options. Even though the code was created by someone else and has worked fine for many users, I can't seem to make it work correctly. Any assistance would be greatly appreciated. Here is t ...

javascriptajax

How to retrieve the value of a selected item in primeng using p-dropdown and angular

Encountering an issue when trying to send the selected item value while iterating over an array of strings like: "BMW", "FERRARI", "AUDI", "BENTLY" Here is the structure of my HTML: <p-dropdown optionLabel="type" [options]="cars" formControlName="name" ...

htmlangulartypescriptprimeng

Using react-big-calendar exclusively for the month view

I need help customizing react-big-calendar to only show the month view and trigger a function when a date is selected. I want to remove all other functionalities related to week, day, agenda, and time display. Essentially, I just want to display the month- ...

javascriptreactjsreact-big-calendarreact-calendar

Changing the boolean value of User.isActive in Node.js: A step-by-step guide

Define a User Model with isActive as a Boolean property. Upon clicking a button, the user is redirected to a route where their information is retrieved based on the id from the parameters. Once the user is found, the script checks the value of isActive. ...

javascriptnode.jsmongodbexpressmongoose

What exactly is the mechanism behind the functionality of ng-cloak?

Recently, I've been delving into the ng-cloak source code and trying to understand its inner workings. If you're interested, you can take a look at the source code here. From what I gather, it seems that the ng-cloak attribute is removed during ...

javascriptangularjs

Outlook's limited width is causing images to exceed the boundaries of the HTML email

I have a collection of images that display perfectly in Gmail, but when viewed in Outlook, all five images appear within a single <tr> and cause the table width to expand. My desired layout is to have the first four images centered on the first line ...

htmlcsshtml-table

Align the timing of the animation with the dataset in ThreeJS

I am faced with the challenge of working with data that includes time in milliseconds and the x, y, z position of an object at each specific time interval. msec |pos_x |pos_y |pos_z ------------------------------ 0 |318 |24 |3 25 |3 ...

javascripthtmlanimationtimethree.js

Steer clear of using absolute positioning in Material-UI and React for better styling and layout

Is there a way to achieve the same layout without using position: absolute for the "Hello There" button? I want to remove that CSS property while keeping the design intact. Any better suggestions? Feel free to check out my codesandbox: CODESANDBOX -----&g ...

cssreactjsmaterial-ui

The steps to display a partial view within another view in React Native

Attempting to show the View after calling alert("Hi") in the renderMoreView function has been challenging for me. The alert works fine, but displaying the View is where I am encountering issues. class Main extends Component { state = { moreButton: f ...

javascriptreactjsreact-nativeexpo

Potential issue: Firefox causes distortion in animated stroke-linecap="round" properties

While working on a project on Stack Overflow, I noticed a potential bug in Firefox when animating a line with stroke-linecap="round" and vector-effect="non-scaling-stroke" svg{border:1px solid} path{ animation: draw 1s ease-in; ...

cssanimationsvg

Is it possible for me to use an image as a grid item?

I have a grid with 3 elements as shown below: Now, I am looking to replace the blue elements with images (they can be just placeholders). .grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(30em, auto); justi ...

htmlcssresponsive-designcss-grid

Having difficulty implementing DragControls

My experience with three.js is at a beginner level, and I recently attempted to incorporate a feature allowing the dragging of a 3D model. During this process, I encountered DragControl but faced difficulty implementing it in my code. Upon using new DragCo ...

javascriptjqueryhtmlthree.jsdrag-and-drop

The attempt to run 'setProperty' on 'CSSStyleDeclaration' was unsuccessful as these styles are precalculated, rendering the 'opacity' property unchangeable

I am attempting to change the value of a property in my pseudo element CSS class using a JavaScript file. Unfortunately, I keep encountering the error mentioned in the title. Is there any other method that can be used to achieve this? CSS Code: .list { ...

javascriptcssgetelementbyidpseudo-elementgetcomputedstyle

Is it possible to trigger the alert message by utilizing this code snippet?

Is it possible to display a message using this function? var start_database = function() { alert('hello'); }; window.setTimeout(start_database, 1000); ...

javascriptjquery

Unable to save a string value from a function to MongoDB is unsuccessful

I've hit a roadblock. Working tirelessly to solve a persistent bug, but it feels like I'm getting nowhere. What am I missing? My goal is clear - once the user submits a form with the enctype of "multipart/form-data", I want to extract t ...

javascriptnode.jsexpressmongoosemulter

transmit data via Javascript to interact with a Python web application

I'm having issues sending a json object from JavaScript to a Python webservice. The service keeps treating it as a string. Here are the codes for both client and server sides: CLIENT SIDE: $("#button").click(function () { $.ajax({ ...

javascriptpythonjsonweb-servicesjquery

Concentrate on the disappeared div element following the AJAX request

Encountering an unusual issue here that has me a bit puzzled. In one of my DIV elements, I have included several links which trigger an AJAX call (using jQuery) upon being clicked. The server (Controller) then responds with HTML content, specifically a JS ...

javascriptjqueryhtmlajaxspring-mvc