I am trying to create a hover effect where the title and content move to the right position upon hovering.
The issue I am facing is that the transition on the `Title` class is not working, and as a result, the hover effect is also not functioning properly.
What I attempted to do was change the hover behavior so that when hovering over the `ImageText` class, both the Title and Content move to `top: 0;` and `position: relative;`, which does work but without the desired transition effect. However, the problem arises when I should only hover over the `Title` class for the transition to occur.
.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 o...
</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 s...
</div>
</div>
</div>
</div>
The desired outcome is that when hovering over the Title, both the Title and the Content should move up to `top: 0;` with a transition duration of `0.5s`.
The solution needs to be achieved using CSS only, without any JavaScript.
For better visualization, it is recommended to view the full page when running the code snippet.