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/

htmlcsscss-transitions

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

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.

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

Issue with displaying jQuery 3.5.1 mobile CSS formatting on live server preview using Visual Studio Code

Despite my best efforts, I can't seem to make the jQuery CSS stylesheet work properly. I've been using the live preview extension in VSCode and got the CSS directly from the jQuery website. <!DOCTYPE html> <html> <head> < ...

htmljquerycssvisual-studio-code

Submitting a HTML form with a select element that will pass comma-separated values in the URL query

My HTML form includes a dropdown menu. <form method="get"> <select name="category[]" multiple class="form-control"> <option value="1">First Value</option> <option value= ...

htmljqueryformshttp-redirectdrop-down-menu

URL relative references across multiple domains

Here's a quick question: When developing themes and coding, how do you navigate linking to different files in your html/css code? For example: At our company, we mostly use <base target="http://whatever"> in our main template and then simply r ...

htmlrelative-path

Adjustable image within a div based on the length of the title when viewed in Edge browser

I am facing an issue with a div element. Here is the code snippet: <div fxLayout="column" fxLayoutGap="20px"> <h1 class="mat-display-1">Welcome to $TITLE$</h1> <img *ngIf="logoData" [src]="logoData" class="logo" alt="logo"/> &l ...

htmlcssangular

What are the steps to restrict a user from accessing a specific website?

In my Vue.js project, I've implemented a function that hides a specific menu item for users with insufficient permissions: <a :href="href" @click="navigate" v-if="hideMenuItem()"> // some code </a> hideMe ...

javascripthtmlcsstypescriptvue.js

What steps can be taken to provide accurate information in the absence of ImageData?

Utilizing a JS library to convert a raster image into a vector, I encountered an issue where the library returned a fill of solid color instead of the desired outcome. I suspect that the problem lies within the ArrayBuffer. The process of loading an imag ...

javascripthtmlcanvasarraybuffer

Guide to displaying highcharts using external json data for numerous series

Having an issue with using angularjs and highcharts with multiple series where the data is coming from an external JSON file. When trying to access the data with a for loop using data.data[i].data, it's not working properly. Can anyone offer assistanc ...

jqueryhtmlangularjsajaxhighcharts

Steps for creating a square button

Is it possible to create a square button on my website that still functions like a traditional button? I want the button to change appearance slightly when scrolled over. Currently, I have an example where the button is not clickable: http://jsfiddle.net ...

css

What steps do I need to take in order to resolve the routing issue with angular.js in my

Working on a mobile application with angular.js and firebase.js has been both exciting and challenging. Recently, I encountered an issue where the page refused to load properly because it was trying to access a peculiar URL file://file:///Users/patutinskij ...

angularjshtmlurl-routingangular-routingngroute

Create a shape using a series of points without allowing any overlap between the lines

JS fiddle There is an array of coordinates that gets populated by mouse clicks on a canvas. var pointsArray = []; Each mouse click pushes x and y values into this array using a click event. pointsArray.push({x: xVal, y: yVal}); The script iterates thr ...

javascripthtmlcanvas

Issue with embedding icon within input field in Bootstrap version 4.1

I am currently implementing a project using Angular 6 along with the latest version of Bootstrap v4.1. I am attempting to create a reactive form with icons within input fields. As there is no direct way in bootstrap to place icons on the left side of input ...

htmlcsstwitter-bootstrapbootstrap-4angular-reactive-forms

Troubleshooting the issue of browser prefix injections not functioning properly in Vue when using the

I've spent an entire afternoon on this issue and I'm completely stuck. After realizing that IE11 doesn't support grid-template, I learned that I need to use -ms-grid-columns and -ms-grid-rows instead. I am attempting to generate CSS and inje ...

javascriptcssvue.jsinternet-explorer-11

The Feedback Form jQuery is not providing any data

I'm facing an issue with my html page that includes an ajax query to a php file. The purpose of this php file is to send a message and then return a response to the ajax query. However, no matter what I try, I am unable to receive any response from th ...

phpjqueryhtmlajaxphpmailer

Is it possible to trigger a modal to open automatically after a 3-second delay?

code: <script> $(document).ready(function() { setInterval(function() { $('#contact').modal(); }, 3000); }); </script> html code: <a href="#contact"><h4><i class="fa f ...

phphtmlcss

The extent of a nameless function when used as a parameter

I am currently developing a straightforward application. Whenever a user hovers over an item in the list (li), the text color changes to green, and reverts back to black when the mouse moves away. Is it possible to replace lis[i] with this keyword in the ...

javascripthtmlcssthisanonymous-function

Is there a way to prevent my table from surpassing the width of my card using CSS?

My table inside a card is not responsive on small screens, causing it to go outside the card. I've tried various solutions like using flex on the parent element and setting the table width equal to the card but nothing seems to work. The card should a ...

cssbootstrap-4

Is there a method to make an <img> automatically adjust its width to fit that of its containing <div> even if the style/attributes are

If I'm unable to customize the style, tag, or attributes of an image element, is there a way to make its width adjust to fit a parent division or another container? This situation pertains to an email template, so external stylesheets, <style> ...

htmlcss

Add fresh inline designs to a React high-order component creation

Applying a common HOC pattern like this can be quite effective. However, there are instances where you may not want a component to be wrapped, but rather just extended. This is the challenge I am facing here. Wrapper HOC const flexboxContainerStyles = { ...

javascriptcssreactjs

Is it possible to enable an email hyperlink to function on a computer?

I successfully created an email link that is functional on mobile devices by using 'href="mailto:[email protected]"'. When I click on the button from a mobile device, it prompts me to choose how I want the email delivered. However, when I tr ...

htmlhtml-email

The previous button on Owl Carousel seems to be malfunctioning after navigating from a different page

In my case, I have two distinct pages: let's call them the first and second pages. On the first page, I utilize an owl carousel slider with a tag that links to a specific slide on the second page's owl carousel slider using an ID. Meanwhile, on ...

javascripthtmljquerycssowl-carousel