Как добавить заливку цветом с прозрачностью поверх фото и с появлением при наведении?

Question

Помогите пожалуйста добавить при наведении на карточку синий цвет с прозрачностью 70%. Два дня пытаюсь и все 0. Прикрепляю фото, каким должен быть результат.

Кто поможет попрошу + к карме)

body {
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
    padding: 0;
    color: #1A2B48;
}

.container {
    width: 1170px;
    margin: 0 auto;
    padding: 0;
}

.element-tropik {
    width: 628px;
    height: 300px;

}

.photo-tropik {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.h2-block-rent {
    position: absolute;
    color: white;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    padding-top: 72px;
    padding-left: 42px;
    margin: 0;
}

.ico-person-p {
    margin: 0;
}

.ico-element-tropik {
    position: absolute;
    color: white;
    margin-left: 42px;
    margin-top: 218px;
}

.btn-price {
    position: absolute;
    color: white;
    margin-left: 470px;
}

.wrapper-svg-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    margin-top: 206px;
}

.btn-block-rent { 
    width: 137px;
    height: 38px;
    background: #5091FA;
    border: 0;
    margin-top: 18px;
    padding: 0;
    cursor: pointer;
    border-radius: 5px;
}

.link-block-rent {
    text-decoration: none;
    color: white;
    text-transform: uppercase;
}

.p-3 {
    padding-left: 15px;
    margin: 0;
}

.wrapper-element-tropik {
    display: flex;
    align-items: center;
}

.ico-person {
    padding-right: 22px;
    width: 27px;
    height: 27px;
}

.wrapper-element-umbrella {
    display: flex;
    align-items: center;
    padding-top: 13px;
}

.ico-umbrella {
    padding-right: 22px;
    width: 28px;
    height: 22px;
}

.ico-umbrella-p {
    margin: 0;
}

.icon-person:hover {
    color: #E8AE46;
    transition: all 0.5s ease;
}

.icon-umbrella:hover {
    color: #E8AE46;
    transition: all 0.5s ease;
}

.btn-block-rent:hover {
    background: #E8AE46;
    transition: all 0.5s ease;
}

<div class="container">
<div class="block-rent">
    <div class="element-tropik">
        <h2 class="h2-block-rent">
            Вилла "Тропик"
        </h2>
        <div class="ico-element-tropik">
            <div class="wrapper-element-tropik">
                <div class="ico-person">
                    <svg class="icon-person" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.0625 23.625C5.0625 23.625 3.375 23.625 3.375 21.9375C3.375 20.25 5.0625 15.1875 13.5 15.1875C21.9375 15.1875 23.625 20.25 23.625 21.9375C23.625 23.625 21.9375 23.625 21.9375 23.625H5.0625ZM13.5 13.5C14.8427 13.5 16.1303 12.9666 17.0797 12.0172C18.0291 11.0678 18.5625 9.78016 18.5625 8.4375C18.5625 7.09484 18.0291 5.80717 17.0797 4.85777C16.1303 3.90837 14.8427 3.375 13.5 3.375C12.1573 3.375 10.8697 3.90837 9.92027 4.85777C8.97087 5.80717 8.4375 7.09484 8.4375 8.4375C8.4375 9.78016 8.97087 11.0678 9.92027 12.0172C10.8697 12.9666 12.1573 13.5 13.5 13.5Z" fill="currentColor"/>
                    </svg>
                </div>
                <div class="ico-person-dis">
                    <p class="ico-person-p">
                        до 5 гостей
                    </p>
                </div>
            </div>
            <div class="wrapper-element-umbrella">
                <div class="ico-umbrella">
                    <svg class="icon-umbrella"  width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0)">
                    <g clip-path="url(#clip1)">
                    <path d="M4.87369 5.78268L9.18685 7.35318C10.6733 3.90891 12.8284 1.25833 15.0583 0.0160475C11.0083 -0.190507 7.08413 1.57725 4.56027 4.73851C4.27768 5.09332 4.44791 5.62766 4.87369 5.78268ZM10.46 7.81697L20.5334 11.4847C22.044 6.35757 21.3233 1.69932 18.7327 0.756519C18.4202 0.64247 18.0936 0.587558 17.7574 0.587558C15.3066 0.58798 12.3392 3.50931 10.46 7.81697ZM22.0275 2.55553C22.2902 3.24405 22.4849 4.01704 22.5851 4.88677C22.8275 6.99413 22.5251 9.45843 21.7846 11.94L26.1193 13.5181C26.5455 13.6732 27.0194 13.3733 27.0304 12.9196C27.1284 8.87763 25.2601 5.00208 22.0275 2.55553ZM23.6546 18.9228H13.5617L16.3048 11.3837L13.7644 10.4587L10.6851 18.9224H0.675845C0.302441 18.9224 0 19.2248 0 19.5986V20.9507C0 21.3241 0.302441 21.627 0.675845 21.627H23.6546C24.028 21.627 24.3304 21.3241 24.3304 20.9507V19.5986C24.3304 19.2252 24.028 18.9228 23.6546 18.9228Z" fill="currentColor"/>
                    </g>
                    </g>
                    <defs>
                    <clipPath id="clip0">
                    <rect width="27.0337" height="21.627" fill="white"/>
                    </clipPath>
                    <clipPath id="clip1">
                    <rect width="27.0337" height="21.627" fill="white"/>
                    </clipPath>
                    </defs>
                    </svg>
                </div>
                <div class="ico-umbrella-dis">
                        <p class="ico-umbrella-p">
                            800 м до моря
                        </p>
                    </div>
            </div>
        </div>
<div class="btn-price">
    <div class="wrapper-svg-btn">
    <svg width="11" height="17" viewBox="0 0 11 17" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M8.75122 0.92216C8.84909 0.978661 8.92483 1.06654 8.96606 1.17145C9.00729 1.27636 9.01158 1.39209 8.97822 1.49974L7.17722 7.3273H10.5002C10.5979 7.32726 10.6934 7.3557 10.775 7.4091C10.8566 7.46251 10.9207 7.53855 10.9595 7.62783C10.9982 7.71711 11.0098 7.81572 10.9929 7.9115C10.9759 8.00727 10.9312 8.09602 10.8642 8.16678L2.86421 16.6313C2.7868 16.7132 2.68379 16.7667 2.57198 16.7829C2.46017 16.7991 2.34613 16.7771 2.24848 16.7205C2.15082 16.6639 2.07529 16.5761 2.0342 16.4712C1.99311 16.3664 1.98888 16.2508 2.0222 16.1433L3.82321 10.3148H0.500201C0.402545 10.3148 0.307016 10.2864 0.225406 10.233C0.143796 10.1796 0.0796767 10.1035 0.0409647 10.0142C0.00225259 9.92496 -0.00935796 9.82634 0.00756618 9.73056C0.0244903 9.63479 0.0692082 9.54604 0.1362 9.47529L8.13622 1.01079C8.21353 0.928931 8.31638 0.875524 8.42804 0.859252C8.53969 0.84298 8.6536 0.8648 8.75122 0.921164V0.92216Z" fill="#E8AE46"/>
    </svg>
    <p class="p-3">
        от 30 000 руб.
    </p>
    
    </div>
    <button class="btn-block-rent">
            <a class="link-block-rent" href="#">Описание</a>
    </button>
</div>
<div class="photo-tropik">
    <img class="photo-tropik" src="https://pokter.ru/wp-content/uploads/2019/02/doma-v-stile-haj-tek-sovremennye-tehnologii-v-interere-kvartiry-1.jpg" alt="">
    </div>
</div>
    </div>
</div>
</div>

Answer 1

Такой эффект заливки цветом с прозрачностью при наведении на элемент можно сделать, например, с помощью псевдоэлементов fefore или after. Вот простой пример:

body {
  font-family: 'Ubuntu', sans-serif;
  margin: 0;
  padding: 0;
  color: #1A2B48;
}

.container {
  width: 100%;
  max-width: 1170px;
  /*margin: 0 auto;*/
  padding: 0;
}

.element-tropik {
  position: relative;
  width: 628px;
  height: 300px;
}

.element-tropik::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(30, 144, 255, 0.6);
  opacity: 0;
  transition: opacity 0.5s;
}

.element-tropik:hover::before {
  opacity: 1;
}

.photo-tropik {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.h2-block-rent {
  position: absolute;
  color: white;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  padding-top: 72px;
  padding-left: 42px;
  margin: 0;
}

.ico-person-p {
  margin: 0;
}

.ico-element-tropik {
  position: absolute;
  color: white;
  margin-left: 42px;
  margin-top: 218px;
}

.btn-price {
  position: absolute;
  color: white;
  margin-left: 470px;
}

.wrapper-svg-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  margin-top: 206px;
}

.btn-block-rent {
  width: 137px;
  height: 38px;
  background: #5091FA;
  border: 0;
  margin-top: 18px;
  padding: 0;
  cursor: pointer;
  border-radius: 5px;
}

.link-block-rent {
  text-decoration: none;
  color: white;
  text-transform: uppercase;
}

.p-3 {
  padding-left: 15px;
  margin: 0;
}

.wrapper-element-tropik {
  display: flex;
  align-items: center;
}

.ico-person {
  padding-right: 22px;
  width: 27px;
  height: 27px;
}

.wrapper-element-umbrella {
  display: flex;
  align-items: center;
  padding-top: 13px;
}

.ico-umbrella {
  padding-right: 22px;
  width: 28px;
  height: 22px;
}

.ico-umbrella-p {
  margin: 0;
}

.icon-person:hover {
  color: #E8AE46;
  transition: all 0.5s ease;
}

.icon-umbrella:hover {
  color: #E8AE46;
  transition: all 0.5s ease;
}

.btn-block-rent:hover {
  background: #E8AE46;
  transition: all 0.5s ease;
}

<div class="container">
  <div class="block-rent">
    <div class="element-tropik">
      <h2 class="h2-block-rent">
        Вилла "Тропик"
      </h2>
      <div class="ico-element-tropik">
        <div class="wrapper-element-tropik">
          <div class="ico-person">
            <svg class="icon-person" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.0625 23.625C5.0625 23.625 3.375 23.625 3.375 21.9375C3.375 20.25 5.0625 15.1875 13.5 15.1875C21.9375 15.1875 23.625 20.25 23.625 21.9375C23.625 23.625 21.9375 23.625 21.9375 23.625H5.0625ZM13.5 13.5C14.8427 13.5 16.1303 12.9666 17.0797 12.0172C18.0291 11.0678 18.5625 9.78016 18.5625 8.4375C18.5625 7.09484 18.0291 5.80717 17.0797 4.85777C16.1303 3.90837 14.8427 3.375 13.5 3.375C12.1573 3.375 10.8697 3.90837 9.92027 4.85777C8.97087 5.80717 8.4375 7.09484 8.4375 8.4375C8.4375 9.78016 8.97087 11.0678 9.92027 12.0172C10.8697 12.9666 12.1573 13.5 13.5 13.5Z" fill="currentColor"/>
                    </svg>
          </div>
          <div class="ico-person-dis">
            <p class="ico-person-p">
              до 5 гостей
            </p>
          </div>
        </div>
        <div class="wrapper-element-umbrella">
          <div class="ico-umbrella">
            <svg class="icon-umbrella" width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0)">
                    <g clip-path="url(#clip1)">
                    <path d="M4.87369 5.78268L9.18685 7.35318C10.6733 3.90891 12.8284 1.25833 15.0583 0.0160475C11.0083 -0.190507 7.08413 1.57725 4.56027 4.73851C4.27768 5.09332 4.44791 5.62766 4.87369 5.78268ZM10.46 7.81697L20.5334 11.4847C22.044 6.35757 21.3233 1.69932 18.7327 0.756519C18.4202 0.64247 18.0936 0.587558 17.7574 0.587558C15.3066 0.58798 12.3392 3.50931 10.46 7.81697ZM22.0275 2.55553C22.2902 3.24405 22.4849 4.01704 22.5851 4.88677C22.8275 6.99413 22.5251 9.45843 21.7846 11.94L26.1193 13.5181C26.5455 13.6732 27.0194 13.3733 27.0304 12.9196C27.1284 8.87763 25.2601 5.00208 22.0275 2.55553ZM23.6546 18.9228H13.5617L16.3048 11.3837L13.7644 10.4587L10.6851 18.9224H0.675845C0.302441 18.9224 0 19.2248 0 19.5986V20.9507C0 21.3241 0.302441 21.627 0.675845 21.627H23.6546C24.028 21.627 24.3304 21.3241 24.3304 20.9507V19.5986C24.3304 19.2252 24.028 18.9228 23.6546 18.9228Z" fill="currentColor"/>
                    </g>
                    </g>
                    <defs>
                    <clipPath id="clip0">
                    <rect width="27.0337" height="21.627" fill="white"/>
                    </clipPath>
                    <clipPath id="clip1">
                    <rect width="27.0337" height="21.627" fill="white"/>
                    </clipPath>
                    </defs>
                    </svg>
          </div>
          <div class="ico-umbrella-dis">
            <p class="ico-umbrella-p">
              800 м до моря
            </p>
          </div>
        </div>
      </div>
      <div class="btn-price">
        <div class="wrapper-svg-btn">
          <svg width="11" height="17" viewBox="0 0 11 17" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M8.75122 0.92216C8.84909 0.978661 8.92483 1.06654 8.96606 1.17145C9.00729 1.27636 9.01158 1.39209 8.97822 1.49974L7.17722 7.3273H10.5002C10.5979 7.32726 10.6934 7.3557 10.775 7.4091C10.8566 7.46251 10.9207 7.53855 10.9595 7.62783C10.9982 7.71711 11.0098 7.81572 10.9929 7.9115C10.9759 8.00727 10.9312 8.09602 10.8642 8.16678L2.86421 16.6313C2.7868 16.7132 2.68379 16.7667 2.57198 16.7829C2.46017 16.7991 2.34613 16.7771 2.24848 16.7205C2.15082 16.6639 2.07529 16.5761 2.0342 16.4712C1.99311 16.3664 1.98888 16.2508 2.0222 16.1433L3.82321 10.3148H0.500201C0.402545 10.3148 0.307016 10.2864 0.225406 10.233C0.143796 10.1796 0.0796767 10.1035 0.0409647 10.0142C0.00225259 9.92496 -0.00935796 9.82634 0.00756618 9.73056C0.0244903 9.63479 0.0692082 9.54604 0.1362 9.47529L8.13622 1.01079C8.21353 0.928931 8.31638 0.875524 8.42804 0.859252C8.53969 0.84298 8.6536 0.8648 8.75122 0.921164V0.92216Z" fill="#E8AE46"/>
    </svg>
          <p class="p-3">
            от 30 000 руб.
          </p>

        </div>
        <button class="btn-block-rent">
            <a class="link-block-rent" href="#">Описание</a>
    </button>
      </div>
      <div class="photo-tropik">
        <img class="photo-tropik" src="https://pokter.ru/wp-content/uploads/2019/02/doma-v-stile-haj-tek-sovremennye-tehnologii-v-interere-kvartiry-1.jpg" alt="">
      </div>
    </div>
  </div>
</div>
</div>

Можно дополнительно добавить еще какую-нибудь легкую и в то же время интересную анимацию. Например такую:

body {
  font-family: 'Ubuntu', sans-serif;
  margin: 0;
  padding: 0;
  color: #1A2B48;
}

.container {
  width: 100%;
  max-width: 1170px;
  /*margin: 0 auto;*/
  padding: 0;
}

.element-tropik {
  position: relative;
  width: 628px;
  height: 300px;
}

.element-tropik::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(30, 144, 255, 0.6);
  transition: all 0.5s;
}

.element-tropik:hover::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.photo-tropik {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.h2-block-rent {
  position: absolute;
  color: white;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  padding-top: 72px;
  padding-left: 42px;
  margin: 0;
}

.ico-person-p {
  margin: 0;
}

.ico-element-tropik {
  position: absolute;
  color: white;
  margin-left: 42px;
  margin-top: 218px;
}

.btn-price {
  position: absolute;
  color: white;
  margin-left: 470px;
}

.wrapper-svg-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  margin-top: 206px;
}

.btn-block-rent {
  width: 137px;
  height: 38px;
  background: #5091FA;
  border: 0;
  margin-top: 18px;
  padding: 0;
  cursor: pointer;
  border-radius: 5px;
}

.link-block-rent {
  text-decoration: none;
  color: white;
  text-transform: uppercase;
}

.p-3 {
  padding-left: 15px;
  margin: 0;
}

.wrapper-element-tropik {
  display: flex;
  align-items: center;
}

.ico-person {
  padding-right: 22px;
  width: 27px;
  height: 27px;
}

.wrapper-element-umbrella {
  display: flex;
  align-items: center;
  padding-top: 13px;
}

.ico-umbrella {
  padding-right: 22px;
  width: 28px;
  height: 22px;
}

.ico-umbrella-p {
  margin: 0;
}

.icon-person:hover {
  color: #E8AE46;
  transition: all 0.5s ease;
}

.icon-umbrella:hover {
  color: #E8AE46;
  transition: all 0.5s ease;
}

.btn-block-rent:hover {
  background: #E8AE46;
  transition: all 0.5s ease;
}

<div class="container">
  <div class="block-rent">
    <div class="element-tropik">
      <h2 class="h2-block-rent">
        Вилла "Тропик"
      </h2>
      <div class="ico-element-tropik">
        <div class="wrapper-element-tropik">
          <div class="ico-person">
            <svg class="icon-person" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.0625 23.625C5.0625 23.625 3.375 23.625 3.375 21.9375C3.375 20.25 5.0625 15.1875 13.5 15.1875C21.9375 15.1875 23.625 20.25 23.625 21.9375C23.625 23.625 21.9375 23.625 21.9375 23.625H5.0625ZM13.5 13.5C14.8427 13.5 16.1303 12.9666 17.0797 12.0172C18.0291 11.0678 18.5625 9.78016 18.5625 8.4375C18.5625 7.09484 18.0291 5.80717 17.0797 4.85777C16.1303 3.90837 14.8427 3.375 13.5 3.375C12.1573 3.375 10.8697 3.90837 9.92027 4.85777C8.97087 5.80717 8.4375 7.09484 8.4375 8.4375C8.4375 9.78016 8.97087 11.0678 9.92027 12.0172C10.8697 12.9666 12.1573 13.5 13.5 13.5Z" fill="currentColor"/>
                    </svg>
          </div>
          <div class="ico-person-dis">
            <p class="ico-person-p">
              до 5 гостей
            </p>
          </div>
        </div>
        <div class="wrapper-element-umbrella">
          <div class="ico-umbrella">
            <svg class="icon-umbrella" width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0)">
                    <g clip-path="url(#clip1)">
                    <path d="M4.87369 5.78268L9.18685 7.35318C10.6733 3.90891 12.8284 1.25833 15.0583 0.0160475C11.0083 -0.190507 7.08413 1.57725 4.56027 4.73851C4.27768 5.09332 4.44791 5.62766 4.87369 5.78268ZM10.46 7.81697L20.5334 11.4847C22.044 6.35757 21.3233 1.69932 18.7327 0.756519C18.4202 0.64247 18.0936 0.587558 17.7574 0.587558C15.3066 0.58798 12.3392 3.50931 10.46 7.81697ZM22.0275 2.55553C22.2902 3.24405 22.4849 4.01704 22.5851 4.88677C22.8275 6.99413 22.5251 9.45843 21.7846 11.94L26.1193 13.5181C26.5455 13.6732 27.0194 13.3733 27.0304 12.9196C27.1284 8.87763 25.2601 5.00208 22.0275 2.55553ZM23.6546 18.9228H13.5617L16.3048 11.3837L13.7644 10.4587L10.6851 18.9224H0.675845C0.302441 18.9224 0 19.2248 0 19.5986V20.9507C0 21.3241 0.302441 21.627 0.675845 21.627H23.6546C24.028 21.627 24.3304 21.3241 24.3304 20.9507V19.5986C24.3304 19.2252 24.028 18.9228 23.6546 18.9228Z" fill="currentColor"/>
                    </g>
                    </g>
                    <defs>
                    <clipPath id="clip0">
                    <rect width="27.0337" height="21.627" fill="white"/>
                    </clipPath>
                    <clipPath id="clip1">
                    <rect width="27.0337" height="21.627" fill="white"/>
                    </clipPath>
                    </defs>
                    </svg>
          </div>
          <div class="ico-umbrella-dis">
            <p class="ico-umbrella-p">
              800 м до моря
            </p>
          </div>
        </div>
      </div>
      <div class="btn-price">
        <div class="wrapper-svg-btn">
          <svg width="11" height="17" viewBox="0 0 11 17" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M8.75122 0.92216C8.84909 0.978661 8.92483 1.06654 8.96606 1.17145C9.00729 1.27636 9.01158 1.39209 8.97822 1.49974L7.17722 7.3273H10.5002C10.5979 7.32726 10.6934 7.3557 10.775 7.4091C10.8566 7.46251 10.9207 7.53855 10.9595 7.62783C10.9982 7.71711 11.0098 7.81572 10.9929 7.9115C10.9759 8.00727 10.9312 8.09602 10.8642 8.16678L2.86421 16.6313C2.7868 16.7132 2.68379 16.7667 2.57198 16.7829C2.46017 16.7991 2.34613 16.7771 2.24848 16.7205C2.15082 16.6639 2.07529 16.5761 2.0342 16.4712C1.99311 16.3664 1.98888 16.2508 2.0222 16.1433L3.82321 10.3148H0.500201C0.402545 10.3148 0.307016 10.2864 0.225406 10.233C0.143796 10.1796 0.0796767 10.1035 0.0409647 10.0142C0.00225259 9.92496 -0.00935796 9.82634 0.00756618 9.73056C0.0244903 9.63479 0.0692082 9.54604 0.1362 9.47529L8.13622 1.01079C8.21353 0.928931 8.31638 0.875524 8.42804 0.859252C8.53969 0.84298 8.6536 0.8648 8.75122 0.921164V0.92216Z" fill="#E8AE46"/>
    </svg>
          <p class="p-3">
            от 30 000 руб.
          </p>

        </div>
        <button class="btn-block-rent">
            <a class="link-block-rent" href="#">Описание</a>
    </button>
      </div>
      <div class="photo-tropik">
        <img class="photo-tropik" src="https://pokter.ru/wp-content/uploads/2019/02/doma-v-stile-haj-tek-sovremennye-tehnologii-v-interere-kvartiry-1.jpg" alt="">
      </div>
    </div>
  </div>
</div>
</div>

Или такую:

body {
  font-family: 'Ubuntu', sans-serif;
  margin: 0;
  padding: 0;
  color: #1A2B48;
}

.container {
  width: 100%;
  max-width: 1170px;
  /*margin: 0 auto;*/
  padding: 0;
}

.element-tropik {
  position: relative;
  width: 628px;
  height: 300px;
}

.element-tropik::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: rgba(30, 144, 255, 0.6);
  transition: all 0.5s;
}

.element-tropik:hover::before {
  left: 0;
  width: 100%;
}

.photo-tropik {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.h2-block-rent {
  position: absolute;
  color: white;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  padding-top: 72px;
  padding-left: 42px;
  margin: 0;
}

.ico-person-p {
  margin: 0;
}

.ico-element-tropik {
  position: absolute;
  color: white;
  margin-left: 42px;
  margin-top: 218px;
}

.btn-price {
  position: absolute;
  color: white;
  margin-left: 470px;
}

.wrapper-svg-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  margin-top: 206px;
}

.btn-block-rent {
  width: 137px;
  height: 38px;
  background: #5091FA;
  border: 0;
  margin-top: 18px;
  padding: 0;
  cursor: pointer;
  border-radius: 5px;
}

.link-block-rent {
  text-decoration: none;
  color: white;
  text-transform: uppercase;
}

.p-3 {
  padding-left: 15px;
  margin: 0;
}

.wrapper-element-tropik {
  display: flex;
  align-items: center;
}

.ico-person {
  padding-right: 22px;
  width: 27px;
  height: 27px;
}

.wrapper-element-umbrella {
  display: flex;
  align-items: center;
  padding-top: 13px;
}

.ico-umbrella {
  padding-right: 22px;
  width: 28px;
  height: 22px;
}

.ico-umbrella-p {
  margin: 0;
}

.icon-person:hover {
  color: #E8AE46;
  transition: all 0.5s ease;
}

.icon-umbrella:hover {
  color: #E8AE46;
  transition: all 0.5s ease;
}

.btn-block-rent:hover {
  background: #E8AE46;
  transition: all 0.5s ease;
}

<div class="container">
<div class="block-rent">
<div class="element-tropik">
<h2 class="h2-block-rent">Вилла "Тропик"</h2>
<div class="ico-element-tropik"><div class="wrapper-element-tropik"><div class="ico-person"><svg class="icon-person" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.0625 23.625C5.0625 23.625 3.375 23.625 3.375 21.9375C3.375 20.25 5.0625 15.1875 13.5 15.1875C21.9375 15.1875 23.625 20.25 23.625 21.9375C23.625 23.625 21.9375 23.625 21.9375 23.625H5.0625ZM13.5 13.5C14.8427 13.5 16.1303 12.9666 17.0797 12.0172C18.0291 11.0678 18.5625 9.78016 18.5625 8.4375C18.5625 7.09484 18.0291 5.80717 17.0797 4.85777C16.1303 3.90837 14.8427 3.375 13.5 3.375C12.1573 3.375 10.8697 3.90837 9.92027 4.85777C8.97087 5.80717 8.4375 7.09484 8.4375 8.4375C8.4375 9.78016 8.97087 11.0678 9.92027 12.0172C10.8697 12.9666 12.1573 13.5 13.5 13.5Z" fill="currentColor"/></svg></div>
<div class="ico-person-dis"><p class="ico-person-p">до 5 гостей</p></div>
</div>
<div class="wrapper-element-umbrella">
<div class="ico-umbrella"><svg class="icon-umbrella" width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><g clip-path="url(#clip1)"><path d="M4.87369 5.78268L9.18685 7.35318C10.6733 3.90891 12.8284 1.25833 15.0583 0.0160475C11.0083 -0.190507 7.08413 1.57725 4.56027 4.73851C4.27768 5.09332 4.44791 5.62766 4.87369 5.78268ZM10.46 7.81697L20.5334 11.4847C22.044 6.35757 21.3233 1.69932 18.7327 0.756519C18.4202 0.64247 18.0936 0.587558 17.7574 0.587558C15.3066 0.58798 12.3392 3.50931 10.46 7.81697ZM22.0275 2.55553C22.2902 3.24405 22.4849 4.01704 22.5851 4.88677C22.8275 6.99413 22.5251 9.45843 21.7846 11.94L26.1193 13.5181C26.5455 13.6732 27.0194 13.3733 27.0304 12.9196C27.1284 8.87763 25.2601 5.00208 22.0275 2.55553ZM23.6546 18.9228H13.5617L16.3048 11.3837L13.7644 10.4587L10.6851 18.9224H0.675845C0.302441 18.9224 0 19.2248 0 19.5986V20.9507C0 21.3241 0.302441 21.627 0.675845 21.627H23.6546C24.028 21.627 24.3304 21.3241 24.3304 20.9507V19.5986C24.3304 19.2252 24.028 18.9228 23.6546 18.9228Z" fill="currentColor"/></g></g><defs><clipPath id="clip0"><rect width="27.0337" height="21.627" fill="white"/></clipPath><clipPath id="clip1"><rect width="27.0337" height="21.627" fill="white"/></clipPath></defs></svg></div>
<div class="ico-umbrella-dis"><p class="ico-umbrella-p">800 м до моря</p></div>
</div>
</div>
<div class="btn-price">
<div class="wrapper-svg-btn"><svg width="11" height="17" viewBox="0 0 11 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.75122 0.92216C8.84909 0.978661 8.92483 1.06654 8.96606 1.17145C9.00729 1.27636 9.01158 1.39209 8.97822 1.49974L7.17722 7.3273H10.5002C10.5979 7.32726 10.6934 7.3557 10.775 7.4091C10.8566 7.46251 10.9207 7.53855 10.9595 7.62783C10.9982 7.71711 11.0098 7.81572 10.9929 7.9115C10.9759 8.00727 10.9312 8.09602 10.8642 8.16678L2.86421 16.6313C2.7868 16.7132 2.68379 16.7667 2.57198 16.7829C2.46017 16.7991 2.34613 16.7771 2.24848 16.7205C2.15082 16.6639 2.07529 16.5761 2.0342 16.4712C1.99311 16.3664 1.98888 16.2508 2.0222 16.1433L3.82321 10.3148H0.500201C0.402545 10.3148 0.307016 10.2864 0.225406 10.233C0.143796 10.1796 0.0796767 10.1035 0.0409647 10.0142C0.00225259 9.92496 -0.00935796 9.82634 0.00756618 9.73056C0.0244903 9.63479 0.0692082 9.54604 0.1362 9.47529L8.13622 1.01079C8.21353 0.928931 8.31638 0.875524 8.42804 0.859252C8.53969 0.84298 8.6536 0.8648 8.75122 0.921164V0.92216Z" fill="#E8AE46"/></svg>
<p class="p-3">от 30 000 руб.</p>
</div>
<button class="btn-block-rent"><a class="link-block-rent" href="#">Описание</a></button>
</div>
<div class="photo-tropik"><img class="photo-tropik" src="https://pokter.ru/wp-content/uploads/2019/02/doma-v-stile-haj-tek-sovremennye-tehnologii-v-interere-kvartiry-1.jpg" alt=""></div>
</div>
</div>
</div>
</div>

Ну или такую:

body {
  font-family: 'Ubuntu', sans-serif;
  margin: 0;
  padding: 0;
  color: #1A2B48;
}

.container {
  width: 100%;
  max-width: 1170px;
  /*margin: 0 auto;*/
  padding: 0;
}

.element-tropik {
  position: relative;
  width: 628px;
  height: 300px;
}

.element-tropik::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  background: rgba(30, 144, 255, 0.6);
  transition: all 0.5s;
}

.element-tropik:hover::before {
  top: 0;
  height: 100%;
}

.photo-tropik {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.h2-block-rent {
  position: absolute;
  color: white;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  padding-top: 72px;
  padding-left: 42px;
  margin: 0;
}

.ico-person-p {
  margin: 0;
}

.ico-element-tropik {
  position: absolute;
  color: white;
  margin-left: 42px;
  margin-top: 218px;
}

.btn-price {
  position: absolute;
  color: white;
  margin-left: 470px;
}

.wrapper-svg-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  margin-top: 206px;
}

.btn-block-rent {
  width: 137px;
  height: 38px;
  background: #5091FA;
  border: 0;
  margin-top: 18px;
  padding: 0;
  cursor: pointer;
  border-radius: 5px;
}

.link-block-rent {
  text-decoration: none;
  color: white;
  text-transform: uppercase;
}

.p-3 {
  padding-left: 15px;
  margin: 0;
}

.wrapper-element-tropik {
  display: flex;
  align-items: center;
}

.ico-person {
  padding-right: 22px;
  width: 27px;
  height: 27px;
}

.wrapper-element-umbrella {
  display: flex;
  align-items: center;
  padding-top: 13px;
}

.ico-umbrella {
  padding-right: 22px;
  width: 28px;
  height: 22px;
}

.ico-umbrella-p {
  margin: 0;
}

.icon-person:hover {
  color: #E8AE46;
  transition: all 0.5s ease;
}

.icon-umbrella:hover {
  color: #E8AE46;
  transition: all 0.5s ease;
}

.btn-block-rent:hover {
  background: #E8AE46;
  transition: all 0.5s ease;
}

<div class="container">
<div class="block-rent">
<div class="element-tropik">
<h2 class="h2-block-rent">Вилла "Тропик"</h2>
<div class="ico-element-tropik"><div class="wrapper-element-tropik"><div class="ico-person"><svg class="icon-person" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.0625 23.625C5.0625 23.625 3.375 23.625 3.375 21.9375C3.375 20.25 5.0625 15.1875 13.5 15.1875C21.9375 15.1875 23.625 20.25 23.625 21.9375C23.625 23.625 21.9375 23.625 21.9375 23.625H5.0625ZM13.5 13.5C14.8427 13.5 16.1303 12.9666 17.0797 12.0172C18.0291 11.0678 18.5625 9.78016 18.5625 8.4375C18.5625 7.09484 18.0291 5.80717 17.0797 4.85777C16.1303 3.90837 14.8427 3.375 13.5 3.375C12.1573 3.375 10.8697 3.90837 9.92027 4.85777C8.97087 5.80717 8.4375 7.09484 8.4375 8.4375C8.4375 9.78016 8.97087 11.0678 9.92027 12.0172C10.8697 12.9666 12.1573 13.5 13.5 13.5Z" fill="currentColor"/></svg></div>
<div class="ico-person-dis"><p class="ico-person-p">до 5 гостей</p></div>
</div>
<div class="wrapper-element-umbrella">
<div class="ico-umbrella"><svg class="icon-umbrella" width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><g clip-path="url(#clip1)"><path d="M4.87369 5.78268L9.18685 7.35318C10.6733 3.90891 12.8284 1.25833 15.0583 0.0160475C11.0083 -0.190507 7.08413 1.57725 4.56027 4.73851C4.27768 5.09332 4.44791 5.62766 4.87369 5.78268ZM10.46 7.81697L20.5334 11.4847C22.044 6.35757 21.3233 1.69932 18.7327 0.756519C18.4202 0.64247 18.0936 0.587558 17.7574 0.587558C15.3066 0.58798 12.3392 3.50931 10.46 7.81697ZM22.0275 2.55553C22.2902 3.24405 22.4849 4.01704 22.5851 4.88677C22.8275 6.99413 22.5251 9.45843 21.7846 11.94L26.1193 13.5181C26.5455 13.6732 27.0194 13.3733 27.0304 12.9196C27.1284 8.87763 25.2601 5.00208 22.0275 2.55553ZM23.6546 18.9228H13.5617L16.3048 11.3837L13.7644 10.4587L10.6851 18.9224H0.675845C0.302441 18.9224 0 19.2248 0 19.5986V20.9507C0 21.3241 0.302441 21.627 0.675845 21.627H23.6546C24.028 21.627 24.3304 21.3241 24.3304 20.9507V19.5986C24.3304 19.2252 24.028 18.9228 23.6546 18.9228Z" fill="currentColor"/></g></g><defs><clipPath id="clip0"><rect width="27.0337" height="21.627" fill="white"/></clipPath><clipPath id="clip1"><rect width="27.0337" height="21.627" fill="white"/></clipPath></defs></svg></div>
<div class="ico-umbrella-dis"><p class="ico-umbrella-p">800 м до моря</p></div>
</div>
</div>
<div class="btn-price">
<div class="wrapper-svg-btn"><svg width="11" height="17" viewBox="0 0 11 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.75122 0.92216C8.84909 0.978661 8.92483 1.06654 8.96606 1.17145C9.00729 1.27636 9.01158 1.39209 8.97822 1.49974L7.17722 7.3273H10.5002C10.5979 7.32726 10.6934 7.3557 10.775 7.4091C10.8566 7.46251 10.9207 7.53855 10.9595 7.62783C10.9982 7.71711 11.0098 7.81572 10.9929 7.9115C10.9759 8.00727 10.9312 8.09602 10.8642 8.16678L2.86421 16.6313C2.7868 16.7132 2.68379 16.7667 2.57198 16.7829C2.46017 16.7991 2.34613 16.7771 2.24848 16.7205C2.15082 16.6639 2.07529 16.5761 2.0342 16.4712C1.99311 16.3664 1.98888 16.2508 2.0222 16.1433L3.82321 10.3148H0.500201C0.402545 10.3148 0.307016 10.2864 0.225406 10.233C0.143796 10.1796 0.0796767 10.1035 0.0409647 10.0142C0.00225259 9.92496 -0.00935796 9.82634 0.00756618 9.73056C0.0244903 9.63479 0.0692082 9.54604 0.1362 9.47529L8.13622 1.01079C8.21353 0.928931 8.31638 0.875524 8.42804 0.859252C8.53969 0.84298 8.6536 0.8648 8.75122 0.921164V0.92216Z" fill="#E8AE46"/></svg>
<p class="p-3">от 30 000 руб.</p>
</div>
<button class="btn-block-rent"><a class="link-block-rent" href="#">Описание</a></button>
</div>
<div class="photo-tropik"><img class="photo-tropik" src="https://pokter.ru/wp-content/uploads/2019/02/doma-v-stile-haj-tek-sovremennye-tehnologii-v-interere-kvartiry-1.jpg" alt=""></div>
</div>
</div>
</div>
</div>

Это самые простые варианты анимации. Различных же вариантов множество.

БЛОГ НА HUSL

Как добавить заливку цветом с прозрачностью поверх фото и с появлением при наведении?

Ответы (1 шт):