Home/ Questions/Q 8415679
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T01:30:55+00:00

I’m trying to create images that will drop out in any direction when hovered

  • 0

I’m trying to create images that will drop out in any direction when hovered over, using just HTML and CSS.

What it’s meant to look like:

  • not hovered over: a section of the image is displayed
  • hover: the remaining section of the image slides out (in a CSS specified direction)

What I’ve tried doing:

a <div> to hold a background-image that cuts off at a certain height and slides out using css animations on hover

<html>
<body>
<style>
    @-webkit-keyframes resize {
        0% {
        }
        100% {
            height: 446px;
        }
    }

    #pic {
        height: 85px;
        width: 500px;
        background-image: url(http://images5.fanpop.com/image/photos/31400000/Cow-cows-31450227-500-446.jpg);
    }

    #pic:hover {
        -webkit-animation-name: resize;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-delay: 0.5s;
        -webkit-animation-direction: normal;
        -webkit-animation-fill-mode: forwards;
    }
</style>
<div id="pic"></div>
<p class="center">Hover over me</p>
</body>
</html>

The problem with this approach is that this moves other content out of the way which I don’t want.
This approach also doesn’t work if I want to slide the image to the left or the right or upwards.

Any suggestions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I put your code on fiddle an worked out a few examples for you:

    I could keep going on like this all day, this is real fun…

    The key to prevent the content from getting pushed is making the picture position absolute. This will lift it out of the flow of the document. Then the direction just becomes a matter of playing around with the position and backround-position values.

    Hope this helps!

    • 0