it should be All done using bootstrap. You need to execute the blocks exactly as in the attached image. The most important points:

  1. so that the image got on the frame
  2. so that when you hover on the block, a strip appears red below. And this strip should be NOT with beveled edges, as if we were just changing the color of the lower border to red.
  3. and so that everything is adaptive and does not roll when the screen size changes.

Perhaps there is some simple way to implement this thing. I still have everything with terrible crutches, and the layout is frayed. I have already tried a variety of variations.

    2 answers 2

    section { box-sizing: content-box; height: 64px; border-bottom: 3px solid transparent; margin: 1em 0; } img { height: 100%; float: left; } div { box-sizing: border-box; height: 100%; overflow: hidden; padding: .5em; border: 3px solid silver; border-left: none; } section:hover { border-color: red; } 
     <section> <img src="//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=64&d=identicon&r=PG"> <div>Π’ΡƒΡ‚ ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ описаниС</div> </section> <section> <img src="//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=64&d=identicon&r=PG"> <div>Π’ΡƒΡ‚ ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ описаниС</div> </section> <section> <img src="//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=64&d=identicon&r=PG"> <div>Π’ΡƒΡ‚ ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ описаниС</div> </section>

    • Thanks buddy. I just did not understand the moment, as you did with the hover, the whole frame is not visible, but only the bottom. - Max1111
    • And when you hover it remains the bottom gray frame. I made it transparent when pointing, and the side edges of the gray frame remained beveled. - Max1111
    • Like decided. Added to the div: hover bottom frame none. It seems as though nothing is jumping, and the bevel has disappeared) - Max1111
    • But box-sizing: content-box; and so there is a default. - Sasha Omelchenko
    • @SashaOmelchenko, in principle, yes, but this is the first thing that they usually override. Even I, despite the fact that I do not like to use reset.css, almost always redefine box-sizing :) - Qwertiy ♦

    It seems that, taking into account that when you move the gray frame there is no + a shadow appears (judging by the screenshot).

     section { box-sizing: border-box; height: 64px; border-bottom: 2px solid transparent; margin: 1em 0; } img { height: 100%; float: left; } div { box-sizing: border-box; height: 100%; overflow: hidden; padding: .5em; border: 1px solid #ddd; border-left: none; background-color: #fff; } section:hover { border-color: #7d2d3a; box-shadow: 0 0 6px 3px rgba(0,0,0,.08); } section:hover div { border-color: transparent; } 
     <section> <img src="http://f.mypage.ru/6e4af88cc78db945ebdc802cee4624da_42989cf41c481cf14353424ad0973e2e.jpg"> <div>ΠšΡƒΡ€Ρ€ΠΎΡ€Ρ‚-Аваза</div> </section> <section> <img src="http://toyrism.ru/wp-content/uploads/2014/08/ΠšΡ€Π°ΡΠΈΠ²Ρ‹ΠΉ-болгарский-ΠΊΡƒΡ€ΠΎΡ€Ρ‚-Бозополь-5.jpg"> <div>ΠšΡ€Π°ΡΠΈΠ²Ρ‹ΠΉ болгарский ΠΊΡƒΡ€ΠΎΡ€Ρ‚ Бозополь</div> </section> <section> <img src="https://c1.staticflickr.com/4/3803/33188251585_155d17931a_o.jpg"> <div>Hotel Splendid Conference Spa Resort 5* располоТСн Π² чудСсном ΠΊΡƒΡ€ΠΎΡ€Ρ‚Π½ΠΎΠΌ мСстСчкС – Π‘Π΅Ρ‡ΠΈΡ‡ΠΈ Π½Π° Π±Π΅Ρ€Π΅Π³Ρƒ Ρ‡ΠΈΡΡ‚Π΅ΠΉΡˆΠ΅Π³ΠΎ АдриатичСского моря.</div> </section>

    And about:

    Like decided. Added to the div: hover bottom frame none. It seems so far nothing is jumping, and the bevel has disappeared)

    it is better to use the selector:

     section:hover div

    so that when you hover and picchu, the same behavior works.

    Instead of a red border for section , you can also make it more elegant, with animation through section:after .

    For example https://jsfiddle.net/acid_grip/3u3pu41y/

    • It is not clear just why the gray frame% was originally needed) - Artyom Kazanovsky
    • Thanks Artem. It turned out great with this animation) - Max1111