Hướng dẫn animation bottom to top css - hoạt ảnh từ dưới lên trên css

Tôi cần làm động một div đi từ dưới lên trên. Đây là tình huống: Tôi có một hình thu nhỏ bao gồm tiêu đề và mô tả của một bộ phim bên trong nó. Tôi muốn ẩn mô tả và chỉ hiển thị nó khi người dùng di chuyển chuột trên đó.

Tôi đã thử thay đổi kích thước chiều cao của container nhưng bạn không thể làm động nó khi giá trị được đặt thành "tự động" và tôi không thể cung cấp một kích thước cụ thể cho nó vì tiêu đề có thể thay đổi cho mỗi bộ phim. Và như nhiều bạn có thể biết, bạn không thể làm động từ dưới lên trên bằng cách sử dụng các thuộc tính "dưới cùng" và "trên cùng".

Đây là HTML:

  

  

  


    

        
The movie title
        

        

            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        
        
Published by Author
    

Và đây là hình ảnh của những gì tôi đang cố gắng thực hiện:

Tôi thực sự hoàn toàn lạc lối, tôi nghĩ rằng tôi đã thử mọi thứ tôi biết. Xin lỗi vì tiếng Anh không quá tuyệt vời của tôi.

Hỏi ngày 2 tháng 4 năm 2019 lúc 0:31Apr 2, 2019 at 0:31

1

Hiển thị mô tả thẻ về di chuột

Hoàn toàn linh hoạt và đáp ứng không có chiều cao mã hóa cứng hoặc tùy ý, không có JS nào liên quan.
No hard-coded or arbitrary heights, no JS involved.

Basically,

• Chuyển tiêu đề sang -100%, trên Hover Animate sang

  /*QuickReset*/*{margin:0;box-sizing:border-box;}
  
  .thumb {
    width: 140px;
    background: #eee;
  }
  
  .anim {
    transition: 0.5s;
    transform: translateY(100%);
  }
  
  .title {
    color: red;
    transition: 0.5s;
    transform: translateY(-100%);
  }
  
  .author {
    color: blue;
  }
  
  /* ANIMATE */
  
  .thumb:hover .anim,
  .thumb:hover .title {
    transform: translateY(0);
  }

  0
• Bọc cả tiêu đề và nội dung vào một div (tức là:

  /*QuickReset*/*{margin:0;box-sizing:border-box;}
  
  .thumb {
    width: 140px;
    background: #eee;
  }
  
  .anim {
    transition: 0.5s;
    transform: translateY(100%);
  }
  
  .title {
    color: red;
    transition: 0.5s;
    transform: translateY(-100%);
  }
  
  .author {
    color: blue;
  }
  
  /* ANIMATE */
  
  .thumb:hover .anim,
  .thumb:hover .title {
    transform: translateY(0);
  }

  1)
• Chuyển

  /*QuickReset*/*{margin:0;box-sizing:border-box;}
  
  .thumb {
    width: 140px;
    background: #eee;
  }
  
  .anim {
    transition: 0.5s;
    transform: translateY(100%);
  }
  
  .title {
    color: red;
    transition: 0.5s;
    transform: translateY(-100%);
  }
  
  .author {
    color: blue;
  }
  
  /* ANIMATE */
  
  .thumb:hover .anim,
  .thumb:hover .title {
    transform: translateY(0);
  }

  1 sang

  /*QuickReset*/*{margin:0;box-sizing:border-box;}
  
  .thumb {
    width: 140px;
    background: #eee;
  }
  
  .anim {
    transition: 0.5s;
    transform: translateY(100%);
  }
  
  .title {
    color: red;
    transition: 0.5s;
    transform: translateY(-100%);
  }
  
  .author {
    color: blue;
  }
  
  /* ANIMATE */
  
  .thumb:hover .anim,
  .thumb:hover .title {
    transform: translateY(0);
  }

  3, và khi di chuột làm động nó sang

  /*QuickReset*/*{margin:0;box-sizing:border-box;}
  
  .thumb {
    width: 140px;
    background: #eee;
  }
  
  .anim {
    transition: 0.5s;
    transform: translateY(100%);
  }
  
  .title {
    color: red;
    transition: 0.5s;
    transform: translateY(-100%);
  }
  
  .author {
    color: blue;
  }
  
  /* ANIMATE */
  
  .thumb:hover .anim,
  .thumb:hover .title {
    transform: translateY(0);
  }

  0

Mở ví dụ trong trang đầy đủ để xem điều gì sẽ xảy ra và cách thức hoạt động:

/*QuickReset*/*{margin:0;box-sizing:border-box;}

.thumb {
  width: 140px;
  background: #eee;
}

.anim {
  transition: 0.5s;
  transform: translateY(100%);
}

.title {
  color: red;
  transition: 0.5s;
  transform: translateY(-100%);
}

.author {
  color: blue;
}

/* ANIMATE */

.thumb:hover .anim,
.thumb:hover .title {
  transform: translateY(0);
}

  

    
The movie even longer title
    

      Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
    
  
  
Published by super long some Author

Flexbox Grid!

Bằng chứng thực tế của ví dụ khái niệm:

/*QuickReset*/

* {
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%
}

body {
  min-height: 100%;
  font: 14px/1.4 sans-serif;
}

.grid-3 {
  display: flex;
  flex-flow: row wrap;
}

.thumb {
  display: flex;
  flex-flow: column nowrap;
  position: relative;
  overflow: hidden;
  width: 33.333%;
  color: #fff;
}

.thumb-gradient,
.thumb-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-gradient {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.56) 100%);
}

.thumb-anim {
  margin-top: auto;  /* pushes all content to bottom */
  position: relative;
  transition: 0.5s;
  transform: translateY(100%);
}

.thumb-title {
  text-transform: uppercase;
  padding: 20px;
  transition: 0.5s;
  transform: translateY(-100%);
}

.thumb-description {
  padding: 10px 20px;
  transition: 0.5s;
  opacity: 0;
  flex: 1;
}

.thumb-author {
  padding: 20px;
  position: relative;
}


/* ANIMATE */

.thumb:hover .thumb-anim {
  transform: translateY(0);
}

.thumb:hover .thumb-title {
  transform: translateY(0%);
}

.thumb:hover .thumb-description {
  opacity: 1;
}

  

    
    

    

      
The movie title
      

        Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
      
    
    
Published by super long some Author
  

  

    
    

    

      
The movie title
      

        The row heights are dictated by the tallest in the horizontal group
      
    
    
Published
  

  

    
    

    

      
The movie title a super long title here
      

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus facilis beatae, numquam aliquam eveniet. Iure porro provident itaque hic quae tempora. Quaerat doloribus dolore facilis similique, soluta asperiores quas sapiente.
      
    
    
Published by super long some Author
  

  

    
    

    

      
The movie title
      

        Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
      
    
    
Published by super long some Author
  

  

    
    

    

      
The movie title
      

        Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
      
    
    
Yep. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate sequi aspernatur cumque saepe incidunt enim, nihil dolores ipsam numquam architecto velit labore quod laboriosam aliquam distinctio tempora unde ad totam.
  

  

    
    

    

      
The movie title
      

        Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
      
    
    
Published by super long some Author
  

Đã trả lời ngày 2 tháng 4 năm 2019 lúc 2:13Apr 2, 2019 at 2:13

Roko C. Buljanroko C. BuljanRoko C. Buljan

185K37 Huy hiệu vàng294 Huy hiệu bạc299 Huy hiệu đồng37 gold badges294 silver badges299 bronze badges

2

Khá dễ dàng với biến đổi CSS ...

.thumbnail-component {
  width: 240px;
  border: 1px solid red;
  overflow: hidden;
  cursor: pointer;
}

.thumbnail-component .text {
  display: inline-block;
  position: relative;
  text-align: center;
  transform: translateY(70%);
  transition: all 1s ease;
}

.thumbnail-component:hover .text {
  transform: translateY(0%);
}

  

  

  


    

      
The movie author
      

      

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      
      
Published by Author
    
  

Đã trả lời ngày 2 tháng 4 năm 2019 lúc 0:52Apr 2, 2019 at 0:52

BugsarepePeopletooBugsarePeopletooBugsArePeopleToo

2.9261 Huy hiệu vàng14 Huy hiệu bạc16 Huy hiệu đồng1 gold badge14 silver badges16 bronze badges

3

Bạn có thể chuyển đổi trên thuộc tính

/*QuickReset*/*{margin:0;box-sizing:border-box;}

.thumb {
  width: 140px;
  background: #eee;
}

.anim {
  transition: 0.5s;
  transform: translateY(100%);
}

.title {
  color: red;
  transition: 0.5s;
  transform: translateY(-100%);
}

.author {
  color: blue;
}

/* ANIMATE */

.thumb:hover .anim,
.thumb:hover .title {
  transform: translateY(0);
}

5, có thể hữu ích ở đây. Để tiết lộ mô tả trong thời gian di chuột, tôi đã đặt

/*QuickReset*/*{margin:0;box-sizing:border-box;}

.thumb {
  width: 140px;
  background: #eee;
}

.anim {
  transition: 0.5s;
  transform: translateY(100%);
}

.title {
  color: red;
  transition: 0.5s;
  transform: translateY(-100%);
}

.author {
  color: blue;
}

/* ANIMATE */

.thumb:hover .anim,
.thumb:hover .title {
  transform: translateY(0);
}

6 của nó thành

/*QuickReset*/*{margin:0;box-sizing:border-box;}

.thumb {
  width: 140px;
  background: #eee;
}

.anim {
  transition: 0.5s;
  transform: translateY(100%);
}

.title {
  color: red;
  transition: 0.5s;
  transform: translateY(-100%);
}

.author {
  color: blue;
}

/* ANIMATE */

.thumb:hover .anim,
.thumb:hover .title {
  transform: translateY(0);
}

0 và đặt nó hoàn toàn an toàn trong thùng chứa cha mẹ tương đối của nó. Cuối cùng, tôi đã loại bỏ

/*QuickReset*/*{margin:0;box-sizing:border-box;}

.thumb {
  width: 140px;
  background: #eee;
}

.anim {
  transition: 0.5s;
  transform: translateY(100%);
}

.title {
  color: red;
  transition: 0.5s;
  transform: translateY(-100%);
}

.author {
  color: blue;
}

/* ANIMATE */

.thumb:hover .anim,
.thumb:hover .title {
  transform: translateY(0);
}

8

/*QuickReset*/*{margin:0;box-sizing:border-box;}

.thumb {
  width: 140px;
  background: #eee;
}

.anim {
  transition: 0.5s;
  transform: translateY(100%);
}

.title {
  color: red;
  transition: 0.5s;
  transform: translateY(-100%);
}

.author {
  color: blue;
}

/* ANIMATE */

.thumb:hover .anim,
.thumb:hover .title {
  transform: translateY(0);
}

9 vì nó không hữu ích khi là một đứa trẻ

/*QuickReset*/*{margin:0;box-sizing:border-box;}

.thumb {
  width: 140px;
  background: #eee;
}

.anim {
  transition: 0.5s;
  transform: translateY(100%);
}

.title {
  color: red;
  transition: 0.5s;
  transform: translateY(-100%);
}

.author {
  color: blue;
}

/* ANIMATE */

.thumb:hover .anim,
.thumb:hover .title {
  transform: translateY(0);
}

5.

.text__content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.text__content__top {
  position: relative;
  margin-top: auto;
  transition: 0.5s flex ease-in-out;
}

.text__description {
  position: absolute;
  opacity: 0;
  transition: 0.4s opacity ease-in-out 0.1s;
}

.text__title {
  border-bottom: 2px solid red;
}

.thumbnail-component:hover .text__content__top {
  flex: 1;
}

.thumbnail-component:hover .text__content__top > * {
  pointer-events: none;
}

.thumbnail-component:hover .text__description {
  opacity: 1;
}

  

    


      

        
The movie title
        

          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        
      

      

        
Published by Author
      

    
  

JSfiddle

Đã trả lời ngày 2 tháng 4 năm 2019 lúc 0:58Apr 2, 2019 at 0:58

Andy Hoffmanandy HoffmanAndy Hoffman

17,8K4 Huy hiệu vàng40 Huy hiệu bạc57 Huy hiệu đồng4 gold badges40 silver badges57 bronze badges

5

Làm thế nào để bạn làm động từ dưới lên trên CSS?

Làm thế nào để bạn làm động một hình ảnh lên xuống trong CSS?

Làm thế nào để tôi đảo ngược một hình ảnh động trong CSS?