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 grupy Bloggerów na FB

Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 39
Dołączył/a: 01 Sty 2006
Posty: 8949
Miasto: Wrocław

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 oraz grupy Blogger Polska! na fb

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ę, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku. :^^:
 
  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 Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 39
Dołączył/a: 01 Sty 2006
Posty: 8949
Miasto: Wrocław

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 oraz grupy Blogger Polska! na fb

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ę, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku. :^^:
 
  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 Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 39
Dołączył/a: 01 Sty 2006
Posty: 8949
Miasto: Wrocław

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 oraz grupy Blogger Polska! na fb

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ę, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku. :^^:
 
  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-2024 Wrocław | modified by Przemo © 2003 phpBB Group.
skocz na górę   |  shoutbox
 
Dodaj na Facebooku:

Zobacz także:


Szablony blogów i stron na wordpress
ogromna baza motywów WP, podzielona na kategorie tematyczne. Proste, jednostronicowe wizytówki lub zaawansowane układy, także z funkcją sklepu internetowego (ecommerce).
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz