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> <div> <div> Yes, this is cat! </div> </div> </div>
