Blogerzy wszystkich platform, łączcie się!

Dyskusje Blogerów, Fotoblogerów i Vlogerów - fora blogowe, graficzne, ogólnotematyczne
rozmowy o blogach, porady, instrukcje, ciekawostki z internetu



::
Autor Wiadomość
anna.sheira 
Blogger.Klub

Dołączyła: 12 Cze 2017
Posty: 0

Wysłany:    [Blogger, Podobne posty] efekt powiększenia po najechaniu na

Cześć ;) Męczę się nad tym już kilka dni, przekopałam pół internetu, i nic ;( Moja niemalże zerowa znajomość kodowania i CSS nie pomaga w rozwiązaniu problemu :D

Otóż, dodałam na swojego bloga (adres, jeśli się przyda)

Kod

http://www.wredna-z-wyboru.blogspot.com
widget Podobne Posty według

Kod

http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html
tej instrukcji.

Dostosowałam do swoich potrzeb i chciałam, aby po najechaniu, miniaturki postów się powiększały. Użyłam kodu transform: scale. Ale problem w tym, że obrazek po najechaniu wychodzi poza ramkę (patrz zdjęcia) a chciałabym, żeby jego rozmiar pozostawał niezmienny. Czytałam, że należy użyć overflow: hidden, ale nie mam pojęcia w którym miejscu.

Wklejam jeszcze mój kod CSS:

Kod

#related-posts {float:left; overflow: hidden; margin-bottom: -30px; position: relative;}
#related-posts a {border: none; margin-left: 10px; text-transform: uppercase; overflow: hidden; }
#related-posts h4 {margin-top: 10px;background:none;font:18px Georgia, serif; text-transform: lowercase; padding:3px;color:#999999; text-align: center; border-top: 1px dotted #a64d79; padding-top: 10px; letter-spacing: -1px; }
#related-posts .related_img {margin:5px;object-fit: cover;width:200px;height:200px; overflow: hidden; border: 0; transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out;}
#related-posts .related_img:hover {transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transform: scale(1.1);}
#related-title {color:#a64d79;text-align:center;text-transform:uppercase;padding: 0px 5px 10px;font-size:10px;width:200px; height: 40px; transition:.5s; text-shadow:0 30px 0 transparent;}
#related-title:hover {color: transparent; transition:.5s; text-shadow:0 0px 0 #a64d79; }


Będę wdzięczna za pomoc ;)
 
  podziel się tym postem na:






Utwórz darmowe konto na forum --- Zaloguj się --- Polub Blogowicza na FB!
Dołącz do społeczności na G+ --- Dołącz do grupy Bloggerów na FB

Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 82
Imię: Arkadiusz (Arek)
Pomógł: 781 razy
Wiek: 32
Dołączył: 01 Sty 2006
Posty: 8792
Miasto: Wroclove City

Wysłany: 2017-06-17, 15:56   podobne wpisy na końcu tekstu - powiększanie miniaturek CSS

Dobrze kombinowałaś z tym overflow nadając go dla elementu A, jednak w tym przypadku kod generuje się z obrazkiem i tytułem wewnątrz niego, więc efekt nie jest taki jakiego byśmy oczekiwali.

Możesz zmodyfikować kod gadżetu poprzez zamianę tego fragmentu:

Kod

<img class="related_img" src="'+thumburl[r]+'"/><br/>
na wersję ze span, który oplecie sam obrazek, dając nam możliwość ustawienia przepełnienia tylko dla niego:
Wiadomość (widoczna dla zarejestrowanych)


Następnie dopisz to do css:

Kod

#related-posts span {display: inline-block; line-height: 0; overflow: hidden;}
i powinno śmigać.

Warto również zainteresować się wersją komórkową. W starych szablonach nie zwracano zbytnio uwagi na tę kwestię a obecnie jest dość istotna.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
anna.sheira 
Blogger.Klub

Dołączyła: 12 Cze 2017
Posty: 0

Wysłany: 2017-06-17, 16:10   

Dziękuję bardzo za odpowiedź ;) Zadziałało, ale tylko w połowie :D Jak najeżdżam to prawy i dolny bok wyglądają jak trzeba, ale górny i prawy nadal wyjeżdżają za ramkę.
 
  podziel się tym postem na:
Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 82
Imię: Arkadiusz (Arek)
Pomógł: 781 razy
Wiek: 32
Dołączył: 01 Sty 2006
Posty: 8792
Miasto: Wroclove City

Wysłany: 2017-06-17, 18:32   

skasuj margines z #related-posts .related_img i dodaj go np. do span.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
anna.sheira 
Blogger.Klub

Dołączyła: 12 Cze 2017
Posty: 0

Wysłany: 2017-06-17, 18:51   

Działa! Dziękuję bardzo! ;)
 
  podziel się tym postem na:
Xenusiowa 
Blogger.Klub


Imię: Natalia
Dołączyła: 24 Sie 2017
Posty: 33
Miasto: Mszczonów

Wysłany: 2017-09-14, 00:20   

Podepnę się tutaj, ponieważ chcę osiągnąć ten sam efekt - otóż chciałam sobie dodać do zdjęć efekt powiększenia, więc pierwsze co mi przyszło do głowy, to oczywiście scale, więc do .post-body img:hover
dodałam transform:scale(1.1) oraz max-width:95% bo tylko mam ustawione w normalnym poście, więc chciałam, żeby tak zostało...

przed:


po:


Jak to rozwiązać?
______________________________________________________
 
  podziel się tym postem na:
Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 82
Imię: Arkadiusz (Arek)
Pomógł: 781 razy
Wiek: 32
Dołączył: 01 Sty 2006
Posty: 8792
Miasto: Wroclove City

Wysłany: 2017-09-14, 07:06   

Trochę naciągamy wątek, bo Ty chcesz powiększać zdjęcia w postach a nie miniatury podobnych wpisów ;) Na początku sądziłem, że będzie to o wiele trudniejsze, ale jak spełni się podstawowy warunek:

Cytat

zdjęcie posta musi mieć odnośnik do swojej większej wersji
to wtedy można CSS zapisać w ten sposób:

Kod


.post-body img {max-width: 100%; height: auto;}
.post-body img:hover {transform: scale(1.1);}

i ustawienie dla odnośników na zdjęciach:
Wiadomość (widoczna dla zarejestrowanych)
które doda otoczkę blokującą wychodzenie zdjęcia poza ramy.

p.s. przy szerokości 95% będzie brzydziej, ale też zadziała.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
Wyświetl posty z ostatnich:   
::
Odpowiedz do tematu
Nie możesz pisać nowych tematów. Zobacz szczegóły.
Nie możesz odpowiadać w tematach. Zobacz szczegóły.
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Nie możesz ściągać załączników na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB & Weblove.pl © 2006-2017 Wrocław | modified by Przemo © 2003 phpBB Group.
skocz na górę   |  shoutbox
 
Dodaj na Facebooku:
Dodaj na Google+:


Zobacz także:


Szablony wordpress
kod zniżkowy -10% za licencję
w koszyku wpisz: Blogowicz
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz