Um Código por ashimadison8

Abrir no Editor Publique Seu Código

Recomendado

16 May 2025

Um Código por alejandrokundrah

14 June 2025

<div class="container">
  <div class="panel">
    <div class="ring">
      <div class="card card1"></div>
      <div class="border">
        <p class="title">Brazil</p>
        <div class="slide">
          <h6 class="para">Latest Deals from Heathrow</h6>
          <div class="line">
            <h6 class="para">OUT</h6> <i class="fa fa-plane" aria-hidden="true"></i>
            <h6 class="para">£849</h6>
          </div>
          <div class="line">
            <h6 class="para">RTN</h6> <i class="fa fa-plane" aria-hidden="true"></i>
            <h6 class="para">£659</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel">
    <div class="ring">
      <div class="card card2"></div>
      <div class="border">
        <p class="title">Belize</p>
        <div class="slide">
          <h6 class="para">Latest Deals from Heathrow</h6>
          <div class="line">
            <h6 class="para">OUT</h6> <i class="fa fa-plane" aria-hidden="true"></i>
            <h6 class="para">£999</h6>
          </div>
          <div class="line">
            <h6 class="para">RTN</h6> <i class="fa fa-plane" aria-hidden="true"></i>
            <h6 class="para">£745</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel">
    <div class="ring">
      <div class="card card3"></div>
      <div class="border">
        <p class="title">Egypt</p>
        <div class="slide">
          <h6 class="para">Latest Deals from Heathrow</h6>
          <div class="line">
            <h6 class="para">OUT</h6> <i class="fa fa-plane" aria-hidden="true"></i>
            <h6 class="para">£399</h6>

</div>
          <div class="line">
            <h6 class="para">RTN</h6> <i class="fa fa-plane" aria-hidden="true"></i>
            <h6 class="para">£257</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  background-color: #2e2e31;
  display: flex;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.container {
  height: 100vh;
  width: 100vw;
  max-height: 600px;
  max-width: 1200px;
  min-height: 600px;
  min-width: 1100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
}

.panel {
  height: 270px;
  width: 190px;
  position: relative;

&:hover {
    .card {
      filter: blur(1.5px);
    }
    .card1 {
      background-size: 215% 135%;
    }
    .card2 {
      background-size: 115% 115%;
    }
    .card3 {
      background-size: 155% 115%;
    }
    .title {
      color: rgba(255, 255, 255, 0.2);
    }
    .border {
      border: 1px solid rgba(255, 255, 255, 1);
    }
    .slide {
      bottom: 0px;
    }
    .ring:before,
    .ring:after {
      transform: translateX(-50%) translateY(-50%) rotate(310deg);
    }
  }
}
.ring,
.card,
.border,
.slide,
.line {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ring {
  color: #fffbf1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 170px;
}

.card {
  background: #f0ead6;
  position: relative;
  transition: all 1s;
  height: 270px;
  width: 190px;
  border: 1px solid rgba(255, 255, 255, 1);
}

.card1 {
  background-image: url("https://assets.codepen.io/489403/brazil.jpg");
  background-repeat: no-repeat;
  background-size: 200% 120%;
}

.card2 {
  background-image: url("https://assets.codepen.io/489403/belize.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.card3 {
  background-image: url("https://assets.codepen.io/489403/egypt.jpg");
  background-repeat: no-repeat;
  background-size: 140% 100%;
}

.ring:before,
.ring:after {
  content: "";
  padding: 0.7em 0.4em;
  position: absolute;
  left: 50%;
  width: 115%;
  top: 50%;
  display: block;
  border: 5px solid #50c9c3;
  border-radius: 50%;
  transition: transform 1s;
  transform: translateX(-50%) translateY(-50%) rotate(50deg);
}

.ring:before {
  border-color: rgb(235, 235, 235) rgb(235, 235, 235) rgba(0, 0, 0, 0)
    rgba(0, 0, 0, 0);
  z-index: -1;
}

.ring:after {
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(235, 235, 235)
    rgb(235, 235, 235);
}

p {
  text-align: center;
  position: absolute;
  font-family: "Playfair Display";
}

.title {
  font-size: 36px;
  font-weight: 700;
  transition: all 1s;
  top: 0;
}

.para {
  bottom: 0;
  font-size: 16px;
  font-family: "Raleway";
  padding: 20px;
  margin: 0;
  text-align: center;
}

.border {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.5);
  height: 260px;
  width: 180px;
  transition: border 1s;
  overflow: hidden;
}

.slide {
  height: 260px;
  width: 180px;
  position: absolute;
  border: 1px solid black;
  bottom: -270px;
  background: rgba(0, 0, 0, 0.5);
  transition: bottom 1s;
  flex-direction: column;
}

.fa-plane {
  font-size: 16px;
}

Um Código por ashimadison8

Recomendado

Um código por DEME

Um Código por alejandrokundrah

Um Código de Metehan

HTML

CSS

JS

Recomendado

Um código por DEME

Um Código por alejandrokundrah

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS