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:






Darmowa rejestracja - utwórz konto na forum --- Zaloguj się na swoje konto --- Polub Blogowicza na FB!

Htsz 
Blogger Top Contributor
Blogowicz.Team


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

Wysłany: 2017-06-17, 16: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, 17: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ł: 756 razy
Wiek: 31
Dołączył: 01 Sty 2006
Posty: 8746
Miasto: Wroclove City

Wysłany: 2017-06-17, 19: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, 19:51   

Działa! Dziękuję bardzo! ;)
 
  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