How to Place Rectangle Inside Image and Make Hover Animation for It in Css?
This Is What I'm Looking for: I Have Cropped an Image with My Html and Css but Have No Idea How to Place Rectangle in It. I Guess for Animation I Should Use...
This is what I'm looking for:
I have cropped an image with my html and css but have no idea how to place rectangle in it. I guess for animation I should use :hover option for my crop class in div.
My code:
1 Answer
I guess this will fit your needs, to adjust the height of the details element, just edit the height: value inside .details
html * {
box-sizing: border-box;
}
.crop {
background-image: url(');
width: 200px;
height: 150px;
background-position: center;
background-size: cover;
position: relative;
overflow: hidden;
}
.shape {
width: 200px;
height: 50px;
color: black;
}
.details {
position: absolute;
bottom: -100%;
left: 0;
right: 0;
height: 100%;
background: rgba(0, 0, 0, 0.5);
padding: 5px 10px;
transition: all 1s;
color: white;
}
.crop:hover > .details {
bottom: 0;
}<div class="shape">
<div class="crop">
<div class="details">
Yes, this is cat!
</div>
</div>
</div>Alexander Ross has covered the video game industry for a decade, writing deep dives on game design, esports tournaments, VR developments, and gaming culture.
