Profidev

Элементы

Image Gallery

Май 1, 2023 #gallery, #Html&CSS only 
  <div class="container">
    <ul class="gallery">
      <li>
        <div class="image">
          <div class="info">
            <span title="Climber">Carlos Rubio</span>
            <span title="Photo">Josetxu Lopez</span>
            <span title="Crag">El Rocodromo</span>
            <span title="Zone">La Pedriza</span>
            <span title="Date">2012</span>
            <span title="Route">To&ntilde;in (7b)</span>
          </div>
        </div>
      </li>
      <li>
        <div class="image">
          <div class="info">			
            <span title="Climber">Mikel</span>
            <span title="Photo">Josetxu Lopez</span>
            <span title="Crag">El Hueso</span>
            <span title="Zone">La Pedriza</span>
            <span title="Date">2009</span>
            <span title="Route">Biafra (6a+/A2)</span>
          </div>
        </div>
      </li>
      <li>
        <div class="image">        
          <div class="info">			
            <span title="Climber">Josetxu Lopez</span>
            <span title="Photo">Uge Garcia</span>
            <span title="Crag">El Caliz</span>
            <span title="Zone">La Pedriza</span>
            <span title="Date">2014</span>
            <span title="Route">Normal (Ae)</span>
          </div>
        </div>
      </li>
      <li>
        <div class="image">
          <div class="info">			
            <span title="Climber">Antonio, Aitor, Uge &amp; Josefer</span>
            <span title="Photo">Josetxu Lopez</span>
            <span title="Crag">El Totem</span>
            <span title="Zone">La Pedriza</span>
            <span title="Date">2011</span>
            <span title="Route">Sur Clasica (6a)</span>
          </div>
        </div>
      </li>
      <li>
        <div class="image">
          <div class="info">			
            <span title="Climber">Aitor Saz</span>
            <span title="Photo">Tximo</span>
            <span title="Crag">Hueco de las Hoces</span>
            <span title="Zone">La Pedriza</span>
            <span title="Date">2012</span>
            <span title="Route">Oscar &amp; Raul (6a)</span>
          </div>
        </div>
      </li>
      <li>
        <div class="image">
          <div class="info">			
            <span title="Climber">Jarutxi Mora</span>
            <span title="Photo">Fernando Bulnes</span>
            <span title="Crag">Cueva de la Mora</span>
            <span title="Zone">La Pedriza</span>
            <span title="Date">2013</span>
            <span title="Route">Gallego (V+)</span>
          </div>
        </div>
      </li>
      <li>
        <div class="image">
          <div class="info">			
            <span title="Climber">Marino</span>
            <span title="Photo">Josetxu Lopez</span>
            <span title="Crag">Tres Coronas</span>
            <span title="Zone">La Pedriza</span>
            <span title="Date">2008</span>
            <span title="Route">El Blues de los ojos bonitos (6a+)</span>
          </div>
        </div>
      </li>
      <li>
        <div class="image">
          <div class="info">			
            <span title="Climber">Josetxu &amp; Uge</span>
            <span title="Photo">Antonio Montes</span>
            <span title="Crag">El Sarcofago</span>
            <span title="Zone">La Pedriza</span>
            <span title="Date">2012</span>
            <span title="Route">El Capuchon (6a/A1)</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
:root {
	--tst: all 0.5s ease 0s;
}

body {
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, serif;
  background-color: #d9d9d9;
  background-image: linear-gradient(314deg, #d9d9d9 0%, #efefef 74%);
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.gallery {
  margin: 0;
  padding: 0;
}

.gallery li {
  position: relative;
  width: calc(25vw - 2.5em);
  height: calc(50vh - 3em);
  box-sizing: border-box;
  margin: 2em 0 0 2em;
  transition: var(--tst);
  float: left;
  list-style: none;
  box-shadow: #0004 0px 0.0625em 0.0625em, #0004 0px 0.125em 0.5em, #ffffff1a 0px 0px 0px 1px inset;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.gallery li:hover {
  transform: scale(1.35);
  z-index: 333;
  transition: var(--tst);
  box-shadow: #0000004d 0px 1.9vmin 3.8vmin, #0004 0 1.5vmin 1.2vmin;
}

.gallery li:nth-child(1):hover {
  transform-origin: 0 0;
}

.gallery li:nth-child(2):hover,
.gallery li:nth-child(3):hover {
  transform-origin: 50% 0;
}

.gallery li:nth-child(4):hover {
  transform-origin: 100% 0;
}

.gallery li:nth-child(5):hover {
  transform-origin: 0 100%;
}

.gallery li:nth-child(6):hover,
.gallery li:nth-child(7):hover {
  transform-origin: 50% 100%;
}

.gallery li:nth-child(8):hover {
  transform-origin: 100% 100%;
}


.image {
  width: 100%;
  height: 100%;
  border: 0.15em solid #fff;
  box-sizing: border-box;
  border-radius: 0.15em;
  background-size: cover !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ffffff;
  position: relative;
  max-width: 500px;
  max-height: 500px;
  margin: auto;
  overflow: hidden;
}


.gallery li:nth-child(1) .image {
  background-image: url(https://cdn.josetxu.com/img/gp-tonin-rocodromo.jpg);
  background-position: center 10%;
}
.gallery li:nth-child(2) .image {
  background-image: url(https://cdn.josetxu.com/img/gp-biafra-hueso.jpg);
  background-position: right 40%;
}
.gallery li:nth-child(3) .image {
  background-image: url(https://cdn.josetxu.com/img/gp-normal-caliz.jpg);
  background-position: 70% 25%;
}
.gallery li:nth-child(4) .image {
  background-image: url(https://cdn.josetxu.com/img/gp-cumbre-totem.jpg);
  background-position: center 20%;
}
.gallery li:nth-child(5) .image {
  background-image: url(https://cdn.josetxu.com/img/gp-oscar-raul-hueco-hoces2.jpg);
}
.gallery li:nth-child(6) .image {
  background-image: url(https://cdn.josetxu.com/img/gp-gallego-cueva-mora.jpg);
  background-position: right 75%;
}
.gallery li:nth-child(7) .image {
  background-image: url(https://cdn.josetxu.com/img/gp-blues-ojos-bonitos-tres-coronas.jpg);
  background-position: right 20%;
}
.gallery li:nth-child(8) .image {
  background-image: url(https://cdn.josetxu.com/img/gp-capuchon-sarcofago.jpg);
  background-position: center 10%;
}



.info { 
  --dark: #333;
  position: absolute;
  bottom: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  text-align: center;
  background: #fff8;
  padding: 15px;
  padding-top: 90px;
  left: calc(-100% - 3px);
  box-sizing: border-box;
  transition: var(--tst);
}

.info:hover {
  left: 0;
  transition: var(--tst);
}

.info:before { 
  content: "\271A";
  position: absolute;
  top: 20px;
  width: 50px;
  height: 50px;
  text-align: center;
  background: radial-gradient(#fff0 15px, #fff8 16px);
  padding: 15px;
  left: 100%;
  box-sizing: border-box;
  border-radius: 0 2em 2em 0;
  color: #fff8;
  font-size: 25px;
  font-family: none;
  line-height: 22px;
}


.info:after {
  --dot: conic-gradient(from 0deg at 0% 100%, var(--dark) 0 25%, #fff0 0 100%);
  content: "DETAILED INFO";
  position: absolute;
  top: 20px;
  width: 100%;
  height: 50px;
  text-align: left;
  background: var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), #fff8;
  padding: 15px 15px 15px 63px;
  left: 0%;
  box-sizing: border-box;
  border-radius: 0;
  color: var(--dark);
  font-size: 18px;
  line-height: 22px;
  mix-blend-mode: color-burn;
  background-repeat: no-repeat;
  background-size: 4px 4px, 4px 4px, 4px 4px, 15px 2px, 15px 2px, 15px 2px;
  background-position: 26px 16px, 26px 23px, 26px 30px, 32px 17px, 32px 24px, 32px 31px;
}


.info span {
  width: 100%;
  margin: 0.25em 0 0.25em 0;
  display: inline-block;
  padding: 0.55em 0.5em 0.55em 4em;
  box-sizing: border-box;
  color: var(--dark);
  text-align: left;
  position: relative;
  text-transform: uppercase;
  font-size: 12px;
  mix-blend-mode: color-burn;
  border-radius: 2em;
}

.info span:hover {
  mix-blend-mode: luminosity;
  background: #fff8;
  filter: invert(1);
}

.info span:before, .info span:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: #fff8;
  height: 100%;
  max-width: 2em;
}


/*climber*/
.info span:nth-child(1):before {
  background: radial-gradient(circle at 50% 50%, var(--dark) 2px , #fff0 3px 150%);
  width: 7px;
  height: 6px;
  border-radius: 100% 100% 100% 40%;
  left: 16px;
  top: 2px;
  border: 3px solid var(--dark);
  border-top-color: #fff0;
  background-repeat: no-repeat;
  transform: rotate(29deg);
}

.info span:nth-child(1):after {
  background: linear-gradient(180deg, var(--dark) 1px , #fff0 1px 150%);
  width: 4px;
  height: 7px;
  border-radius: 100% 50% 100% 0%;
  left: 15px;
  top: 13px;
  border: 3px solid var(--dark);
  border-bottom-color: #fff0;
  background-repeat: no-repeat;
  transform: rotate(-1deg);
}


/*photo*/
.info span:nth-child(2):before {
  background: radial-gradient(circle at 50% 42%, var(--dark) 2px, #fff0 3px 4px, var(--dark) 5px 100%);
  width: 20px;
  height: 13px;
  left: 11px;
  top: 8px;
  border-radius: 2px;
}

.info span:nth-child(2):after {
  border: 10px solid #fff0;
  border-width: 0px 2px 4px 2px;
  border-bottom-color: var(--dark);
  width: 10px;
  background: #fff0;
  height: 0px;
  left: 14px;
  top: 5px;
}


/*crag*/
.info span:nth-child(3):before {
  border: 10px solid #fff0;
  height: 0;
  border-bottom-color: var(--dark);
  border-width: 0 6px 10px 6px;
  left: 12px;
  top: 10px;
  background: #fff0;
}

.info span:nth-child(3):after {
  border: 10px solid #fff0;
  height: 0;
  border-bottom-color: var(--dark);
  border-width: 0 6px 15px 6px;
  left: 18px;
  top: 5px;
  background: #fff0;
}


/*zone*/
.info span:nth-child(4):before {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  left: 13px;
  top: 3px;
  background: radial-gradient(circle at 50% 50%, var(--dark) 2px, #fff0 3px 4px, var(--dark) 5px 100%);
}

.info span:nth-child(4):after {
  border: 10px solid #fff0;
  height: 0;
  border-top-color: var(--dark);
  border-width: 8px 6px 0 6px;
  left: 15px;
  top: 16px;
  background: #fff0;
}


/*date*/
.info span:nth-child(5):before {
  border: 2px solid var(--dark);
  width: 17px;
  height: 11px;
  border-top-width: 4px;
  left: 11px;
  top: 5px;
  background: repeating-conic-gradient(from 0deg at 40% 60%, var(--dark) 0 25% , #fff0 0 100%);
  background-size: 5px 5px;
  background-position: 0.25px -4px;
  border-radius: 2px;
}


/*route*/
.info span:nth-child(6):before {
  width: 22px;
  height: 22px;
  left: 11px;
  top: 3px;
  background: 
    radial-gradient(circle at 60% 50%, var(--dark) 1px, #fff0 2px 100%), 
    radial-gradient(circle at 37% 70%, var(--dark) 1px, #fff0 2px 100%), 
    radial-gradient(circle at 52% 64%, var(--dark) 1px, #fff0 2px 100%), 
    radial-gradient(circle at 45% 42%, var(--dark) 1px, #fff0 2px 100%), 
    radial-gradient(circle at 49% 25%, var(--dark) 1px, #fff0 2px 100%), 
    radial-gradient(circle at 61% 15%, var(--dark) 1px, #fff0 2px 100%), 
    radial-gradient(circle at 18% 84%, #fff0 1px, var(--dark) 2px 3px, #fff0 4px 100%),
    radial-gradient(circle at 85% 16%, #fff0 1px, var(--dark) 2px 3px, #fff0 4px 100%);
}



/*** MEDIA QUERIES ***/

@media only screen and (max-width:1023px) {
  .gallery li {
    width: calc(33vw - 2.5em);
  }
  .gallery li:nth-child(3) {
    display: none;
  }
  .gallery li:nth-child(7) {
    display: none;
  }
}


@media only screen and (max-width:767px) {

  .gallery li {
    width: calc(50vw - 1.5em);
    height: calc(33.75vh - 1.5em);
    margin: 1em 0 0 1em;
  }
  .info {padding: 10px;}
  .info:after {display: none;}
  .info span {font-size: 10px;}
  
  .gallery li:nth-child(2):hover {
	  transform-origin: 100% 0;
	}
	.gallery li:nth-child(4):hover {
	  transform-origin: 0 50%;
	}
	.gallery li:nth-child(5):hover {
	  transform-origin: 100% 50%;
	}
	.gallery li:nth-child(6):hover {
	  transform-origin: 0 100%;
	}

}


@media only screen and (max-width:767px) and (orientation:landscape) {
  .gallery li {
    width: calc(33.75vw - 1.5em);
    height: calc(50vh - 1.5em);
    margin: 1em 0 0 1em;
  }
  .info span {padding: 0.4em 0.5em 0.4em 4em;}
}


@media only screen and (max-width:1024px) {
  .info:after {font-size: 15px;}
}


@media only screen and (max-width:540px) {
  .info:after {font-size: 15px;}
}

Похожие записи

Элементы

Modal css

Сен 17, 2023 admin
Элементы

Scroll animation

Авг 2, 2023 admin
Элементы

3d Text effect

Авг 2, 2023 admin

Вы пропустили

Карточки ReactJS

Recipe Card React.js

18.06.2026 admin
Карточки

Recipe Card

18.06.2026 admin
ReactJS Слайдеры

Image Carousel React.js

08.06.2026 admin
Слайдеры

Image Carousel

08.06.2026 admin