如何结合两个CSS动画

Question

I'm trying to replicate the menu design used by:

https://www.pandaexpress.com/menu/appetizers

I think I am at the point where I need to use javascript/jquery, but I'm very new and unsure of my next step. When the user hovers over an image the image seems to slide into focus and display information below. I have tried to isolate this into separate actions, modeled by the following jfiddles:

https://jsfiddle.net/Lrqu8L0q/3/ (enlarges and focuses image on hover) https://jsfiddle.net/4ud7wnop/1/ (slides down to reveal text on hover)

I tried combining them but when I add the

<p>This text is displayed on a downward slide after hover</p>

to the first jfiddle the paragraph isn't hidden.

Now I'm having trouble trying to think of a way to combine the both. I think I need to use javascript/jquery to create a function that applies the slide down to reveal text after the image enlarge has been completed. I'm very new to web design as a whole and am especially shaky with javascript and jquery.

I was wondering if I could write a function that checks if the image has expanded on enlarge yet, and after it's reached a desired height/width run the text slide function. Really not sure how to do this.. could someone point me in the correct direction?

Answer 1

I merged them together here: https://jsfiddle.net/danbovey/53ya31gm/

The main problem was, you need the image to be larger to cover over any detail text you may have.

I have commented on most changes I added in the fiddle. But here's the key parts:

I renamed the bg element to tile , it seemed more appropriate. Instead of working with height for the .slide-down class, I created a transform on the details div when the tile is hovered.

.tile:hover .details {
    transform: translateY(150%);
}

You can learn about CSS transforms here: http://css3.bradshawenterprises.com/transforms/

The percentage of the transform can be calculated as the height of img / height of details - 300px / 200px = 150%

To create the growing effect, a pseudo :before element adds a white area the same size of the image before the tile, and when hovered, grows to 25px around each edge. And an identical element is added to the details div.

.tile:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFF;
  transition: all 0.4s ease;
  content: '';
}

.tile:hover:before {
  top: -25px;
  left: -25px;
  width: calc(100% + 50px);
  height: calc(100% + 50px);
}

Answer 2

Is this what you want here? https://jsfiddle.net/Lrqu8L0q/9/

 .thumbnail{ width: 100px; height: 100px; display:block; z-index:999; cursor: pointer; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); border-radius: 2px; } .bg:hover { transform: scale(1.25) } .bg{ width: 150px; height: 110px; background-color: teal; border-radius: 2px; } .slide-down { border-radius: 3px; height: 60px; width: 150px; position: relative; transition: height 0.3s; -webkit-transition: height 0.3s; text-align: center; overflow: hidden; background-color: teal; } .bg:hover .slide-down { height: 140px; } .container{ position: relative; left: 150px; top: 50px; } 

 <div class="container"> <div class="bg"> <img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/> <div class="slide-down"> <h2>Title</h2> <p>This text is displayed after a downward slide on hover</p> </div> </div> </div> 

Basically what you need to do is put both your requirement into 1 combined object (in this I mean put both the Image & Text inside 1 container) like in the above example

<div class="bg">
    <img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
    <div class="slide-down">
        <h2>Title</h2> 
        <p>This text is displayed after a downward slide on hover</p>
    </div>
</div>

Both of them are put inside 1 container with class .bg , then what you want is to hover the container (not the thumbnail or description itself) and trigger both the scaling & slide-down the menu detail, you can do this by adding the CSS

.bg:hover { ... }

For the scaling , you need to put it together with the container so all the elements inside will be scaled to, then for the description inside it, you need to use

.bg:hover slide-down { ... }

This is where you set the animation that will expand the description of the menu (for explanation, this CSS will trigger on .bg hover, and applied to the element .slide-down inside of it)