Jaki to efekt?

pytanie zadane 2 lipca 2018 w Offtop przez Layoutowiec Mądrala (5,470 p.)
edycja 2 lipca 2018 przez Layoutowiec

Witam!

Mógłby mi ktoś powiedzieć jaki efekt jest tutaj użyty(ten po najechaniu na zdjęcia)? I jak go wykonać lub o czym powinienem poczytać.

Dziękuję za poświęcony czas!

2 odpowiedzi

odpowiedź 2 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 2 lipca 2018 przez Layoutowiec

Najlepsza

o coś takiego chodzi?

https://codepen.io/Tomek_Sochacki/pen/xzBdNV

Pisane na szybko ale mniej więcej tak to można osiągnąć.

Pokaż 8 poprzednich komentarzy

komentarz 2 lipca 2018 przez Layoutowiec Mądrala (5,470 p.)

No to nie wiem... Sorry

komentarz 2 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Popracuj elementami:

$border: ...

::after {
  position: absolute;
  border-top: $border;
  border-bottom: $border;
}

::before {
  position: absolute;
  border-left: $border;
  border-right: $border;
}

z odpowiednimi ustawieniami pozycjonowania absolutnego i jakąś animacją np. na @keyframes odpalaną na hovera dla głównego elementu. Do tego możesz dać im np. display: none i potem:

.image {
  &::after {
    position: absolute;
    border-top: $border;
    border-bottom: $border;
  }
  &::before {
    position: absolute;
    border-left: $border;
    border-right: $border;
  }
  &:hover {
    &::before, &::after {
      display: block;
    }
  }
}

Animacji nie chce mi się pisać, pobaw się trochę CSS. Te powyższe reguły to też tak na szybko, trzeba by je na spokojnie przemysleć, może ktoś da lepsze rozwiązanie, ja nie siedzę zbyt dużo w animacjach itp. więc to tylko taka pierwsza moja myśl jak to rozwiązać.

komentarz 2 lipca 2018 przez Layoutowiec Mądrala (5,470 p.)

Ok dzięki, jeszcze sobie z tym pokombinuje. A mógłbyś mi jeszcze powiedzieć jak zrobić to z tym zdjęciem w tle http://wrapbootstrap.com/preview/WB04B42CG (przy dole strony) w sensie że ono tam sobie jest i nie reaguje na scrolla (mam nadzieje że wiesz o co chodzi). Ja czytałem kiedyś coś o tym ale nie mogę sobie przypomnieć ani znaleźć żadnej informacji o tym.

komentarz 2 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Możesz np. pokombinować z:

width: 100%;
background: url("....") no-repeat fixed;
background-size: cover;

dla tego elementu, czyli dać mu tło jako background i ustawić na fixed. Kiedyś robiłem coś takiego ale nie jestem teraz pewien co i jak, trzeba by generalnie kombinować ale jak pisalem, layutu i design to nie moja mocna strona (nie ma to jak mówi takie słowa gość zajmujący się zawodowo client-side :p)