Ein Code von ashimadison8

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Empfohlen

16 April 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 hamzanramzan034

Ein Code von logicalarray833

Ein Code von Metehan

HTML

CSS

JS

Empfohlen

Ein Code von hamzanramzan034

Ein Code von logicalarray833

Ein Code von Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS