Grid css3 zawijanie tekstu za obrazkiem

komentarz 15 lipca 2018 przez Raloseq Nowicjusz (190 p.)

Tylko , że ja na gridzie robie

komentarz 15 lipca 2018 przez pablop76 VIP (123,180 p.)
edycja 15 lipca 2018 przez pablop76

A co to ma do rzeczy? To nie można używać float do tego żeby tekst opływał obrazek?

komentarz 15 lipca 2018 przez Raloseq Nowicjusz (190 p.)

to ze pod tym obrazkiem nie ma tak jakby wolnego miejsca tylko to jest jedna kolumna i jak to zrobic zeby tam miejsce bylo

komentarz 15 lipca 2018 przez pablop76 VIP (123,180 p.)

Poprostu wtawić go tam gdzie jest tekst i dać mu float:left;

komentarz 15 lipca 2018 przez Raloseq Nowicjusz (190 p.)

Wtedy nie działa transition i się nie skaluje

komentarz 15 lipca 2018 przez Raloseq Nowicjusz (190 p.)

@pablop76, Może dam ci screena z kodu ?

komentarz 15 lipca 2018 przez Raloseq Nowicjusz (190 p.)

<main>
<section class="about-author">
<div class="author-image">
<img src="images/avatar2.png">
<div class="text-overlay">
<div class="text1">Dzień dobry</div>
</div>
</div>
<div class="author-biography">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue pharetra volutpat. Morbi vulputate lectus vitae tellus tincidunt semper. Aenean molestie pharetra condimentum. Nulla consectetur luctus neque sed tristique. Vestibulum facilisis scelerisque ex vitae elementum. Phasellus scelerisque quam id ornare blandit. Aliquam eget nulla eget dolor aliquam fermentum. Aenean sit amet elementum nunc. Suspendisse potenti. Integer dignissim eget diam non dignissim.

Nullam sollicitudin purus vitae placerat fringilla. Aenean lacinia malesuada diam, id pulvinar urna faucibus finibus. Suspendisse non euismod ex, id fringilla justo. Sed faucibus, lectus at ullamcorper iaculis, sem nisi tempor velit, vel vehicula diam augue eget velit. Suspendisse eu erat erat. Proin a placerat enim, eu sodales arcu. Cras dictum tellus vel porttitor maximus. Proin vel urna elementum ante malesuada hendrerit. Etiam lacinia fringilla tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed consectetur erat at justo elementum sollicitudin. Proin lobortis lacus at dui mattis maximus sed egestas est. Vestibulum et ante vel mauris sollicitudin venenatis. Cras luctus rhoncus felis aliquam interdum. Sed libero sapien, vehicula quis leo sed, efficitur sagittis dui.

Integer ipsum odio, finibus quis fermentum non, egestas venenatis lorem. Vivamus ipsum felis, faucibus suscipit vestibulum vitae, porta ut urna. Suspendisse luctus mauris quis dolor placerat, sed feugiat nunc interdum. In interdum facilisis erat ac vestibulum. Suspendisse molestie, felis vitae auctor commodo, urna arcu feugiat mauris, eget lacinia tortor leo vel felis. Nam urna velit, volutpat vitae elementum sit amet, bibendum in ipsum. Maecenas aliquam nisl ac purus consectetur, id aliquet lectus auctor.Nullam sollicitudin purus vitae placerat fringilla. Aenean lacinia malesuada diam, id pulvinar urna faucibus finibus. Suspendisse non euismod ex, id fringilla justo. Sed faucibus, lectus at ullamcorper iaculis, sem nisi tempor velit, vel vehicula diam augue eget velit. Suspendisse eu erat erat. Proin a placerat enim, eu sodales arcu. Cras dictum tellus vel porttitor maximus. Proin vel urna elementum ante malesuada hendrerit. Etiam lacinia fringilla tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed consectetur erat at justo elementum sollicitudin. Proin lobortis lacus at dui mattis maximus sed egestas est. Vestibulum et ante vel mauris sollicitudin venenatis. Cras luctus rhoncus felis aliquam interdum. Sed libero sapien, vehicula quis leo sed, efficitur sagittis dui.

Integer ipsum odio, finibus quis fermentum non, egestas venenatis lorem. Vivamus ipsum felis, faucibus suscipit vestibulum vitae, porta ut urna. Suspendisse luctus mauris quis dolor placerat, sed feugiat nunc interdum. In interdum facilisis erat ac vestibulum. Suspendisse molestie, felis vitae auctor commodo, urna arcu feugiat mauris, eget lacinia tortor leo vel felis. Nam urna velit, volutpat vitae elementum sit amet, bibendum in ipsum. Maecenas aliquam nisl ac purus consectetur, id aliquet lectus auctor.</p>
</div>
</section>
</main>

.about-author {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  grid-gap: 1em;
  width: 100%;
  padding: 1.5em;
}
.author-image {
    position: relative;
    height: 100%;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
.text-overlay {
  position: absolute;
  bottom: 100%;
  background-color: green;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.author-image:hover .text-overlay {
  bottom: 0;
  height: 100%;
}

.text1 {
  color: white;
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
@media (max-width: 800px) {
    .about-author {
        grid-template-columns: 1fr;
    }
}

komentarz 15 lipca 2018 przez pablop76 VIP (123,180 p.)

Niestety pisze z telefonu. Ciężko mi to analizować :(

komentarz 15 lipca 2018 przez Raloseq Nowicjusz (190 p.)

To jak kiedyś będziesz miał czas to czekam z niecierpliwością :D

komentarz 15 lipca 2018 przez pablop76 VIP (123,180 p.)

Zrób jak napisałem. Responsywność dla img ustaw width:100%; max-widh:400px; i testuj

komentarz 15 lipca 2018 przez Raloseq Nowicjusz (190 p.)

Ale jest ustawione to i tak nic nie zmienia chodzi o to ze to jest grid i float:left nie dziala bo ta wolna przestrzen pod obrazkiem jest zajeta dla kolumny w ktorej jest zdjecie

komentarz 15 lipca 2018 przez pablop76 VIP (123,180 p.)

Ale ja napisałem żebyś włożył obrazek do kolumny razem z tekastem.

komentarz 15 lipca 2018 przez Raloseq Nowicjusz (190 p.)

wtedy nie działa tranistion i obrazek się nie skaluje jak pisałem powyżej dobra nieważne zostanie tak poprostu :D

komentarz 16 lipca 2018 przez pablop76 VIP (123,180 p.)

To można ustawić width: 25%; min-width:200px; albo coś w tym stylu. Będzie działać. Nie poddawaj się. :)

Chidzi o ustawienie szerokości obrazka względem kolumny. Czy ma zajmować 20% kolumny, czy może 30% itd. Oraz żeby nie był mniejszy niż np.200px gdy kolumna będzie wąska.