The essence of the picture, how to add side reflections to blocks? I tried the box-reflect option applied to the main div, but it reflects only the block itself (that is, the content not contained in it) and also does it in a mirror. Another option is to create copies of the divs with the cards, hook them with pseudo-elements, and then change the opacity and positioning so that they go beyond the screen. But this seems too cumbersome.

Maybe there is an option how to do it more simply and elegantly?

enter image description here

    1 answer 1

    It is unlikely that you will apply this property, since only WebKit has support:

     img{ max-height:200px; -webkit-box-reflect: below 10px; } 
     <div class="items"> <div class="item"><img src="https://get.wallhere.com/photo/women-model-blonde-minidress-red-photography-dress-fashion-hair-clothing-color-girl-beauty-lady-leg-blond-hairstyle-photo-shoot-abdomen-human-body-136579.jpg" alt=""></div> </div>
    But this example can live:

     #img1{ -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } 
     <div class="flip"> <img id="img1" src="http://st.gde-fon.com/wallpapers_preview/649619_model_poza_figura_krasnoe-plate_plate_www.Gde-Fon.com.jpg" alt=""> <img id="img"src="http://st.gde-fon.com/wallpapers_preview/649619_model_poza_figura_krasnoe-plate_plate_www.Gde-Fon.com.jpg" alt=""> </div>

    • But in your example, the picture is still mirrored, but with an example that I indicated, it is turned in the same direction as the main one ... - Alexey Shevchenko