• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak zrobić taki box

VPS Starter Arubacloud
+1 głos
450 wizyt
pytanie zadane 20 grudnia 2020 w HTML i CSS przez Poczatkujaca s z.o.o Obywatel (1,860 p.)
Witam potrzebuje zrobić taki box zdjęcie obrazek, a po najechaniu howerek tekst. zdjęcie i tekst muszę być w pliku html a nie css, bo docelowo ładowane będą z bazy danych. fajnie jakby zdjęcie było tez linkiem i przenosiło na inna stronę.

Coś jak tu w sekcji goście specjalini:

https://www.kurs.inteligentnyinwestor.pl/

5 odpowiedzi

0 głosów
odpowiedź 20 grudnia 2020 przez wizarddos Nałogowiec (25,130 p.)
pokombinuj z position:absulute i z-indexem. Wstawiasz diva a w nim obrazek (na całe jego wymiary), dodajesz kolejnego diva z tekstem, dajesz mu position:absulute i ustawiasz atrybuty(np. top, bottom) i potem w pliku css ustawiasz z-index obrazka na np. 100 a z -index tekstu na np 10 lub dowolną liczbę mniejszą od ustawionej dla obrazka. A potem przy hoverze zmieniasz z-index tekstu na większy niż obrazka. Ewentualnie jakieś przejścia. Chyba że jest jakiś nowszy sposób to pewnie ktoś tu na dole napisze
komentarz 20 grudnia 2020 przez Poczatkujaca s z.o.o Obywatel (1,860 p.)
Dzięki
0 głosów
odpowiedź 20 grudnia 2020 przez Poczatkujaca s z.o.o Obywatel (1,860 p.)
0 głosów
odpowiedź 22 grudnia 2020 przez icelify Użytkownik (800 p.)
0 głosów
odpowiedź 22 grudnia 2020 przez NoOgar95 Dyskutant (9,310 p.)
Cześć,

Podrzucam swoje rozwiązanie, bardzo proste czysty HTML i CSS.

Tworzymy pierwszego diva nadajemy mu określone wartości wysokości szerokości. Następnie w jego środku dajemy drugiego diva z takimi samymi wymiarami, nadajemy mu jakiś odcień szarości z kanałem alfa ustawionym na 0. Sprawi, że drugi div nie będzie widoczny na stronie. Do drugiego diva dodajemy tekst któremu nadajemy przeźroczystość 0, sprawi, że nie będzie widać tekstu. Po najechaniu na okno zmieniamy wartość kanału alfa dla drugiego diva, oraz opacity/przeźroczystość tekstu na 1.

https://codepen.io/NoOgar/pen/zYKdVdr

 

https://codepen.io/NoOgar/pen/zYKdVdr
0 głosów
odpowiedź 22 grudnia 2020 przez VBService Ekspert (251,210 p.)
edycja 22 grudnia 2020 przez VBService

Oto Moja propozycja. wink  Codepen

<head>
  <base target="_blank" href="https://forum.pasja-informatyki.pl/521930/jak-zrobic-taki-box?show=522278">
</head>

<body>
  <div class="wrap">

    <a class="card" href="#a522278">
      <img src="https://source.unsplash.com/240x341"/>
      <div class="details">
        <span class="title">Lorem ipsum #1</span>
        <span class="description">
          Etiam dictum lacus ex, nec porttitor ligula faucibus vitae.
          Vestibulum consectetur odio eget elementum porta. In in mollis purus.
          Aliquam rutrum leo metus, non aliquet magna elementum id.
          Nulla id urna varius, volutpat risus et, varius lacus.
          Donec velit tortor, volutpat nec justo vel, facilisis malesuada tellus.
        </span>        
      </div>
    </a>  

    <a class="card" href="#a522278">
      <img src="https://source.unsplash.com/240x342"/>
      <div class="details">
        <span class="title">Lorem ipsum #2</span>
        <span class="info">Quisque vel felis lectus donec vitae dapibus magna</span>
      </div>
    </a>

    <a class="card" href="#a522278">
      <img src="https://source.unsplash.com/240x343"/>
      <div class="details">
        <span class="title">Lorem ipsum #3</span>
        <span class="description">
          <span>Etiam dictum lacus ex, nec porttitor ligula faucibus vitae.</span>
          <span>Vestibulum consectetur odio eget elementum porta. In in mollis.
            Aliquam rutrum leo metus, non aliquet magna elementum id.
            Nulla id urna varius, volutpat risus et, varius lacus.</span>
          <span><mark>Donec velit tortor, volutpat nec justo vel.</mark></span>
        </span>        
      </div>
    </a>

  </div>
</body>

@charset "UTF-8";
@viewport {
  width: device-width;
  initial-scale: 1;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
html, body {
  padding: 0;
  margin: 0;
  border: 0;
}
.wrap {
  width: 100vw;
}
.wrap .card {
  display: inline-block;
  position: relative;
  margin: 0.3em;
  opacity: 1;
  overflow: hidden;  
  border-radius: 0.3em;
  box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.89);
}
.wrap .card:before {
  content: '';
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 40%,
                                         rgba(0, 0, 0, 0.9) 70%, rgba(0, 84, 84, 0.95) 100%);
  width: 100%;
  height: 80%;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}
.wrap .card img {
  display: block;
  max-width: 100%;
}
.wrap .card .details {
  font-size: 16px;
  padding: 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.wrap .card .details span {
  display: block;
  opacity: 0;
  position: relative;
  top: 70%;
  transform: translateY(200%);
  -webkit-transitiony: all 1s 0.01s;
  transition: all 1s 0.01s;
}
.wrap .card .details .title {
  font: 1.1em/1.2em monospace;
}
.wrap .card .details .description {
  font: 0.8em/1em;
  margin-top: 0.8em;
}
.wrap .card:focus:before,
.wrap .card:focus span,
.wrap .card:hover:before,
.wrap .card:hover span {
  opacity: 1;
  transform: translateY(0);
}
.wrap .card:focus:before,
.wrap .card:hover:before {
  top: 20%;
}

Podobne pytania

0 głosów
1 odpowiedź 469 wizyt
pytanie zadane 14 grudnia 2017 w HTML i CSS przez madmi121 Użytkownik (760 p.)
0 głosów
1 odpowiedź 3,681 wizyt
0 głosów
1 odpowiedź 158 wizyt
pytanie zadane 17 lutego 2022 w HTML i CSS przez trixter310 Obywatel (1,440 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...