 |
| Before |
 |
| After |
Click here for a Live Demo!
I don't imagine Mosaic Dynamic View being very famous among Blogger users, as I rarely see any questions on the said template. But here's one for all you Mosaic users out there. When you hover over a mosaic post in Mosaic view, the post's thumbnail would pop-up and get slightly increased. With a little bit of magic code, you could make the pop-up thumbnails much larger, and appealing. And here's how.
Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
.mosaic.notouch:not(.animating) .item:hover:not(.open), .ss{
-moz-transform: scale(1.5) !important;
-webkit-transform: scale(1.5) !important;
-ms-transform: scale(1.5) !important;
-o-transform: scale(1.5) !important;
}
I like it! It works! Thanks Yoboy!
ReplyDeleteThanks for the bug report early on Bob. Appreciate it! :)
DeleteYou're most welcome Birgitta :)
ReplyDeleteI think my comment got eaten somewhere >.>
ReplyDeleteThanks for this - looks so much better for my photography blog. :D You is fantastic
Is there any way of changing the white strip at the top of the photos on hover to another colour? My post title is white so the white on white is rather.... invisible
Hey Hannah,
DeleteIt has been some time..
Sure! Here:
.tile.thumbnail .banner{
background: blue !important;
}
Cheers :)
I've been checking here and there :D Been very happy with layouts and it's only since revamping the photography blog that I noticed the banner thing :p
DeleteThanks again so very much :D
Looking forward to more of your helpful tips and tricks
I thought you'd like blue, with your background blue and all. My guess was correct :)
DeleteHi yoga,
ReplyDeleteis there any way to modify or define the minimum size of a image in this view?
or maybe equal to the exact size of the image in the post?
Hi Ashneet,
DeleteNot without messing up your thumbnails, nope.. Sorry bout this..
Hey, this info is great. Is there any way to make the titles always visible instead of just on the mouse hover over?
ReplyDeleteThanks
Yeap, it is possible :)
DeleteGo to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.mosaic .tile .banner{
display: block !important;
}
Cheers :)
Thank you so much!
DeleteMost welcome :)
DeleteHey, first of all thank you for this really great hint. I'd like to know if it's possible to set the mosaic tiles a little bigger by default. sometimes they get really small and it's not a beautiful view! Any hint on that?
ReplyDeleteThank you!
Hi nicola,
DeleteSorry for the late reply. The tiles' sizes are dynamically determined when your blog loads. It is not possible to define static values to these tiles.
Cheers :)
Truly you are a genius.
ReplyDeleteCan you figure out how to remove the drop shadow upon hover? And perhaps replace it with a single pixel black line?
cheers
Hi Jez,
DeleteNice thoughts! Here, add it to your CSS. If you wanna remove the crisp black line, remove the third line in the code below..
.notouch:not(.animating) .item:hover:not(.open){
box-shadow: 0px 0px 0px transparent !important;
border: 1px solid black !important;
}
It turns out to be a nice effect.. :)
Cheers..
You're a gentleman, many thanks.
Deletehttp://reguxdesignnews.blogspot.co.uk/
i played with the box-shadow settings a bit, made it work for me rather having to remove it altogether. I loath drop shadows, but it's easy to make them appear solid.
Anyway, thank you, sir. I've learnt tons from your extensive notes. Great work.
Don't mention it Jez Alder. Glad you've tweaked it as you've wanted :)
DeleteCheers..
Great stuff!
ReplyDeleteI browsed your site for another question related to Mosaic, but it doesn't appear to have been covered. Is there a way when you open a post in mosaic to change the border color over an image? By default it's white, and you've covered how to remove it but not change the color! I'm looking for black as it frames images nicer. Thanks!
http://joshuacairns.com
Hi Joshua,
DeleteI've come up with two possible outcomes. I'm not sure which one you'd like, but here's the code for both:
The first one:
.mosaic .article .article-content img:not(.deferred){
border: 1px solid black !important;
}
The second one:
.mosaic .article .article-content img:not(.deferred){
background: black !important;
}
Add one of the codes to your 'Add CSS' box. Cheers :)
You are brilliant. Your promptness to replies is fantastic! thank you!!
DeleteIt does still leave the white border between the photo and the black border though. Any way you can think of to get rid of that?
DeleteRightt.. Try this:
Delete.mosaic .article .article-content img:not(.deferred){
border: 2px solid black !important;
padding: 0px !important;
}
And thanks :)
Cheerss.
Hullo! First of all - thanks for this great site, it should be official blogger help site, due to it's commitment and professionalism.
ReplyDelete1. One more question about blogger mosaic dynamic view: how to change border color around tiles? (not hovered yet).
.tiles{
border-color #008080 !important
}
doesn't work :|
2. And one more: why post picture disappears in mosaic mode?
my blog site: www.obserwatorium-teodora.blogspot.com (it's beta for now ;))
best regards!
Hi Teodor,
Delete1. Use this code instead:
.mosaic .item{
border-color: #008080 !important;
}
2. As for the post pictures, change the following code:
.tile
{
color: #008080 !important;
background: #0E3D53 !important;
border-color: #008080 !important;
}
to this:
.tile{
color: #008080 !important;
}
Cheers :)
thanks a bunch! :]
DeleteOkay I must be the other person that likes Mosaic,...
ReplyDeleteWhat I want to do is center the pics like you did for flipcard.
I other words have a left and right Margin/Padding.
I like my background to show a bit on the sides is this Possible?
Hi Paul,
DeleteSee if this is what you're looking for. Add it to your 'Add CSS' box:
.mosaic .item{
padding: 10px !important;
background: transparent !important;
}
.mosaic #content .item{
background: transparent !important;
}
Cheers :)
Hello Yoga. First of all I would like to thank you very much for all the content you provide here. It's a great help for us!
ReplyDeleteI also would like to know if it's possible to have the thumbnails shown in mosaic mode in black and white, and just show the original colors when the mouse is over the image. Thanks in advance!
Hi Douglas, I'm afraid that is not even remotely possible in Dynamic Templates, unfortunately.
DeleteHello Yoga. Thank you for a most useful and informative site!
ReplyDeleteI have used several of your codes with success to customise my blog.
I have a problem with the Mosaic Dynamic View and hope you can help me.
The mosaic view works perfectly on Mac/PC and iPad, but when I load the site on a smartphone, it always defaults to the Classic Dynamic view. I have read that all Dynamic views always default to "Classic" when viewed on mobile. Is there a way to force the site to load the Mosaic view on mobile?
Thanks in advance!