Ein Code von ashimadison8

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

20 May 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;
}

Ein Code von ashimadison8

Empfohlen

Ein Code von Gregory

Ein Code von alejandrokundrah

Ein Code von Metehan

HTML

CSS

JS

Empfohlen

Ein Code von Gregory

Ein Code von alejandrokundrah

Ein Code von Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS