On the Internet, found a curious effect for images. But my knowledge of layout is not enough to change the direction of movement of the gradient (top-down to left-to-right) and loop it, that is, the challenge is not pointing to a picture.

figure { width: 314px; height: 271px; position: relative; overflow: hidden; display: inline-block; top: -120%; transition: top 1s cubic-bezier(0, 0, 1, 1); } figure:hover { top: 120%; } figure:before, figure:after { content: ''; display: block; position: absolute; height: 100%; } figure:before { width: 100%; top: inherit; left: 0; opacity: 0.3; background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), #ffffff 40%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0)); transform: rotate(0deg); } figure:nth-child(1) { background-image: url("http://ichef.bbci.co.uk/news/ws/660/amz/worldservice/live/assets/images/2015/09/02/150902003640_google_624x351_google_nocredit.jpg"); } section { width: 100% text-align: center; } body{ background: #fff; } 
 <figure></figure>

I would be happy for help in this matter!

    1 answer 1

    To create an animation, use the animation property. It allows you to adjust the duration of the animation and the number of repetitions of the animation.

    @keyframes defines the appearance of the animation. This is done using keys after @keyframes . Each key describes where the animated element should be at the moment.

    In your case, a duplicate image is created in figure:before , which is animated by passing over the original image, thereby creating an effect. To change the effect you need to change the figure:before animation, which I did in the example.

    animation: [имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈΠ· @keyframes] [врСмя ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ] [количСство ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ infinite для бСсконСчного повторСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ];

    Read more: MDN Using CSS Animation

     figure { width: 314px; height: 271px; position: relative; overflow: hidden; display: inline-block; } figure:before, figure:after { content: ''; display: block; position: absolute; height: 100%; } figure:before { width: 100%; opacity: 0.3; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 40%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0)); transform: rotate(0deg); animation: effect 1s infinite; } figure:nth-child(1) { background-image: url("http://ichef.bbci.co.uk/news/ws/660/amz/worldservice/live/assets/images/2015/09/02/150902003640_google_624x351_google_nocredit.jpg"); } @keyframes effect { from { left: -120%; } to { left: 120%; } } 
     <figure></figure>