Issue
When hovering over this image, I would like the gray box to appear at the bottom and then slide up. As it slides up, anything it goes over would become grayscale. Then I would like after I move my mouse of the image for gray box to slide back down and remove grayscale as it passes the image.
I got majority of it to work using css only and the only problem I have is when the mouse exits the image I can't figure out how to play the animation back.
Here is what I have tried:
.wrapper {
position: relative;
img {
width: 600px;
height: 375px;
}
.hover {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
width: 600px;
height: 100px;
animation-name: example2;
animation-duration: 1s;
display: none;
.gray-image {
width: 100%;
height: 100%;
background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg');
background-repeat: no-repeat;
background-size: 600px 375px;
background-position: bottom 0 left 0;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
//position: absolute;
}
.text {
color: #FFF;
text-align: center;
width: 100%;
height: 100px;
background-color: rgba(89, 89, 89, 0.9);
}
}
&:hover {
.hover {
animation-name: example;
animation-duration: 1s;
height: 375px;
display: block;
}
}
}
@keyframes example {
from {
height: 100px;
}
to {
height: 375px;
}
}
@keyframes example2 {
from {
height: 375px;
}
to {
height: 100px;
}
}
<div class="wrapper">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" />
<div class="hover">
<div class="gray-image" />
<div class="slide-box">
<div class="text">
<span>This is the title</span>
</div>
</div>
</div>
</div>
How can I achieve my full effect?
Here is also a jsfiddle for those that prefer it: https://jsfiddle.net/pt15ckeL/2/
Solution
Use transition and you can simplify your code like below:
.wrapper {
position: relative;
width: 600px; /* control the size */
overflow: hidden;
}
.wrapper img {
width: 100%;
display: block;
}
/* the gray image as pseudo element*/
.wrapper::before {
content: "";
position: absolute;
inset: 0;
background: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg') 50%/100% auto;
filter: grayscale(100%);
clip-path: inset(100% 0 0); /* hide it initially */
transition: 1s;
}
/* your text */
.text {
position: absolute;
inset: 0;
color: #FFF;
text-align: center;
line-height: 100px; /* center within 100px of height */
background: linear-gradient(grey 100px,#0000 0); /* color only 100px of height from the top */
translate: 0 100%; /* slide it so it overflow the wrapper */
transition: 1s;
}
.wrapper:hover::before {
clip-path: inset(0); /* reveal the grey image */
}
.wrapper:hover .text {
translate: 0 0; /* slide back to the top */
}
<div class="wrapper">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" />
<div class="text">
<span>This is the title</span>
</div>
</div>
And here is another idea using backdrop-filter
where you don't need to set the image as background so no url duplication in your code.
.wrapper {
position: relative;
width: 600px;
overflow: hidden;
}
.wrapper img {
width: 100%;
display: block;
}
.text {
position: absolute;
inset: 0;
color: #FFF;
text-align: center;
line-height: 100px;
background: linear-gradient(grey 100px,#0000 0);
translate: 0 100%;
backdrop-filter: grayscale(100%);
transition: 1s;
}
.wrapper:hover .text {
translate: 0 0;
}
<div class="wrapper">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" />
<div class="text">
<span>This is the title</span>
</div>
</div>
Answered By - Temani Afif
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.