Moving elements upwards and downwards using CSS transitions

Question

Moving elements upwards and downwards using CSS transitions

I am currently designing a metro tiles menu for my website, without using JavaScript and only relying on HTML and CSS.

The issue I am facing involves the sliding tiles and the direction in which they slide. Additionally, there seems to be a problem where the next tile is hiding underneath the previous one.

#block4 - Slides DOWN
#block5 - Slides UP.

#block4:hover {
 position: absolute;
  z-index: 2;
  background: rgba(150,150,150,0.95);
  width: 100%;
  height: 50px;
  overflow:hidden;
  transition: height 450ms;
  -moz-transition: height 450ms;
  -webkit-transition: height 450ms;
     height: 300px;
     z-index: 2;
}
#block5:hover {
 position: absolute;
  z-index: 2;
  background: rgba(150,150,150,0.95);
  width: 100%;
  height: 50px;
  overflow:hidden;
  transition: height 450ms;
  -moz-transition: height 450ms;
  -webkit-transition: height 450ms;
     height: 300px;
     z-index: 2;

Check out the example on JSFiddle - https://jsfiddle.net/werk13/7tza9yqq/

html css css-transitions

Answer 1

Answer №1

Take a look at this link.

.slider {
    overflow-y: hidden;
    max-height: 500px; /* approximate maximum height */

    transition-property: all; // specified here
    transition-duration: .5s; // specified here
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1); // used for this purpose
}

Here is another interesting demonstration.

#toggle + label {
  position:absolute;
  cursor:pointer;
  padding:10px;
  background: #26ae90;
  width: 100px;
  border-radius: 3px;
  padding: 8px 10px;
  color: #FFF;
  line-height:20px;
  font-size:12px;
  text-align:center;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  margin:20px 50px;
  transition:all 500ms ease; // right over here
}
#toggle + label:after {
  content:"Open" 
}

.container {
  transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); // found in this section
  padding:5em 3em;
}

Answer 2

Take a look at this link.

.slider {
    overflow-y: hidden;
    max-height: 500px; /* approximate maximum height */

    transition-property: all; // specified here
    transition-duration: .5s; // specified here
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1); // used for this purpose
}

Here is another interesting demonstration.

#toggle + label {
  position:absolute;
  cursor:pointer;
  padding:10px;
  background: #26ae90;
  width: 100px;
  border-radius: 3px;
  padding: 8px 10px;
  color: #FFF;
  line-height:20px;
  font-size:12px;
  text-align:center;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  margin:20px 50px;
  transition:all 500ms ease; // right over here
}
#toggle + label:after {
  content:"Open" 
}

.container {
  transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); // found in this section
  padding:5em 3em;
}

Answer 3

Answer №2

To ensure that block#3 floats without disrupting the surrounding elements, it is important not to alter any other elements as the browser will automatically readjust all elements upon any modifications being made.

Given your restriction on using JS in the code, here are a couple of approaches you can consider: 1. Set the elements to a fixed position. This will prevent any changes in their layout when hovering over other elements and altering their styles. 2. Utilize "hidden" elements. Create a new element identical to #block4, referred to as #block4dup, with the same content and positioning. This duplicate element will have an absolute position and opacity set to 0. The desired hover effect should be applied to #block4dup:hover, allowing you to adjust properties like opacity and height without impacting other floating elements on the page.

While this solution may involve some duplication of content, it offers a viable option given the restrictions on JavaScript usage, ensuring satisfactory outcomes for your design requirements.

Answer 4

To ensure that block#3 floats without disrupting the surrounding elements, it is important not to alter any other elements as the browser will automatically readjust all elements upon any modifications being made.

Given your restriction on using JS in the code, here are a couple of approaches you can consider: 1. Set the elements to a fixed position. This will prevent any changes in their layout when hovering over other elements and altering their styles. 2. Utilize "hidden" elements. Create a new element identical to #block4, referred to as #block4dup, with the same content and positioning. This duplicate element will have an absolute position and opacity set to 0. The desired hover effect should be applied to #block4dup:hover, allowing you to adjust properties like opacity and height without impacting other floating elements on the page.

While this solution may involve some duplication of content, it offers a viable option given the restrictions on JavaScript usage, ensuring satisfactory outcomes for your design requirements.

Moving elements upwards and downwards using CSS transitions

Answer №1

Answer №2

Similar questions

Using jQuery to target a specific item from a retrieved list of elements

To emphasize code in an HTML document, you can use the <font color="#xxx"> tag

During the click event, two distinct $.ajax requests interfere and cancel each other out

Gone Without a Trace: Where Did the WP Admin

Is there a way to automatically select all checkboxes when I select contacts in my case using Ionic 2?

Leverage object properties as data table field values in VueJS

Troubleshooting a Windows Phone HTML5 app encountering an Ajax error

Is using readonly attribute for HTML inputs a security concern?

Is it possible to incorporate a Node.js library into an HTML document?

Using Jquery to add elements one by one

How can HTML be added in CodeBehind using C# in a WebForm?

What is the process for adjusting the color of a mat-divider?

Position the select tag adjacent to the textbox

The issue of children inside a parent div not respecting the height value set to 100% when the parent div has a min

What is the best way to align an image underneath text?

Is there a way to customize Firefox's default styles similar to Chrome's?

What is the best way to wrap the countdown numbers with <span> tags?

What can be done to prevent divs from overlapping? They display properly on a computer browser, but not on mobile devices like phones or tablets

"Adjusting the size of a jQuery dialog for optimal viewing on

Master Angular Autocompletion