如何实现从下到上的过渡
[英]How to make transition from bottom to top
问题描述
I want to make the title and the content to move up to the right position on hover.
我想让标题和内容在 hover 上向右移动 position。
The problem is that the transition on the Title class doesn't work and the hover effect doesn't work as well.问题是Title class 上的过渡不起作用，hover 效果也不起作用。
What i tried to do is to change the hover so that when i hover over the ImageText class, both the Title and Content go to top: 0; What i tried to do is to change the hover so that when i hover over the ImageText class, both the Title and Content go to top: 0; and postion: relative;和postion: relative; and this works but the transtion doesn't work.这有效，但转换不起作用。 But the problem here is that i should not hover over ImageText.但这里的问题是我不应该在 ImageText 上使用 hover。 What I should hover over is the Title class however when I try this, the transition doesn't work.我应该 hover 是Title class 但是当我尝试这个时，转换不起作用。
.Section { display: grid; grid-template-columns: 1fr 5fr 1fr; transform: translateY(30px); }.Column2 { grid-column: 2; display: grid; grid-template-rows: 200px 200px 200px; grid-gap: 1em; }.two { grid-row: 2; display: grid; grid-template-columns: 1fr 1fr 2fr; grid-column-gap: 1em; }.ImageText { position: relative; background-size: 100%; color: white; overflow: hidden; transition: 0.5s; height: 100%; }.Title:hover+.Content { position: relative; top: 0; }.Content:hover { position: relative; top: 0; } /*.Title:hover { position: relative; top: 0; } */.Content:hover+.Title { position: relative; top: 0; }.Title { background-color: rgba(0, 0, 0, 0.6); font: caption; position: absolute; bottom: 0; width: 100%; transition: 0.5s; }.Content { background-color: rgba(0, 0, 0, 0.6); position: absolute; top: 100%; height: inherit; transition: 0.5s; }
<div class="Section"> <div class="Column2"> <div class="two"> <div class="ImageText" style="background-image:url(https://i.ibb.co/6Rvr53T/1.jpg)"> <div class="Title"> SpaceX's Next Starship Prototype Taking Shape </div> <div Class="Content"> Construction of the test craft is proceeding apace, as two new photos posted on Twitter today (Sept. 17) by company founder and CEO Elon Musk reveal. </div> </div> <div class="ImageText" style="background-image:url(https://i.ibb.co/F87mkdk/3.jpg)"> <div class="Title"> NASA's Juno Mission Cheks Out Eclipse on Jupiter </div> <div Class="Content"> All is well on our largest neighbor; NASA's Juno spacecraft just managed to spot the shadow of Jupiter's moon, Io, passing over its marbled clouds. </div> </div> <div class="ImageText" style="background-image:url(https://i.ibb.co/yRMWZQ5/4.jpg)"> <div class="Title"> Europe Wants Ideas for Cave-Spelumking Moon Robots </div> <div Class="Content"> As NASA makes a big push to land humans on the moon's surface by 2024, the European Space Agency (ESA) wants to learn more about the lunar caves that lie beneath. </div> </div> </div> </div> </div>
The result should be, when you hover over the Title, both the Title and the Content should go up to top:0;结果应该是，当您在标题上使用 hover 时，标题和内容都应 go 到top:0; and this effect should have transtion:0.5s;这个效果应该有transtion:0.5s;
The solution should be with CSS not JavaScript.解决方案应该是 CSS 而不是 JavaScript。
It is better to go to full page when running the code snippet so that you have better visualisation of the problem.运行代码片段时最好将 go 到整页，以便您更好地可视化问题。
1 个解决方案
解决方案1
0 2019-09-27 23:47:06
Try this or smth like that.试试这个或那样。 Put the Content blocks in the Title blocks.将内容块放在标题块中。
.Section { display: grid; grid-template-columns: 1fr 5fr 1fr; transform: translateY(30px); }.Column2 { grid-column: 2; display: grid; grid-template-rows: 200px 200px 200px; grid-gap: 1em; }.two { grid-row: 2; display: grid; grid-template-columns: 1fr 1fr 2fr; grid-column-gap: 1em; }.ImageText { position: relative; background-size: 100%; color: white; overflow: hidden; transition: 0.5s; height: 100%; }.Title { background-color: rgba(0, 0, 0, 0.6); font: caption; position: absolute; bottom: 0; width: 100%; }.Title.Content { max-height: 0; transition: max-height 0.25s; overflow: hidden; }.Title:hover.Content { max-height: 500px; transition: max-height 0.5s; overflow: hidden; } <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <link rel="stylesheet" href="./Style:css" /> </head> <body> <div class="Section"> <div class="Column2"> <div class="two"> <div class="ImageText" style="background-image:url(https.//thenypost.files.wordpress.com/2019/09/ap_19265088288587,jpg)"> <div class="Title"> SpaceX's Next Starship Prototype Taking Shape <div class="Content"> Construction of the test craft is proceeding apace. as two new photos posted on Twitter today (Sept. 17) by company founder and CEO Elon Musk reveal: </div> </div> </div> <div class="ImageText" style="background-image:url(https.//thenypost.files.wordpress.com/2019/09/ap_19265088288587;jpg)"> <div class="Title"> NASA's Juno Mission Cheks Out Eclipse on Jupiter <div Class="Content"> All is well on our largest neighbor, NASA's Juno spacecraft just managed to spot the shadow of Jupiter's moon, Io. passing over its marbled clouds: </div> </div> </div> <div class="ImageText" style="background-image:url(https.//thenypost.files.wordpress.com/2019/09/ap_19265088288587,jpg)"> <div class="Title"> Europe Wants Ideas for Cave-Spelumking Moon Robots <div Class="Content"> As NASA makes a big push to land humans on the moon's surface by 2024. the European Space Agency (ESA) wants to learn more about the lunar caves that lie beneath. </div> </div> </div> </div> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.