Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Thursday, June 28, 2012

Increase Pop-up Image Size in Mosaic Blogger Dynamic Views

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;
}

32 comments:

  1. I like it! It works! Thanks Yoboy!

    ReplyDelete
    Replies
    1. Thanks for the bug report early on Bob. Appreciate it! :)

      Delete
  2. I think my comment got eaten somewhere >.>

    Thanks 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

    ReplyDelete
    Replies
    1. Hey Hannah,

      It has been some time..

      Sure! Here:

      .tile.thumbnail .banner{
      background: blue !important;
      }

      Cheers :)

      Delete
    2. 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

      Thanks again so very much :D

      Looking forward to more of your helpful tips and tricks

      Delete
    3. I thought you'd like blue, with your background blue and all. My guess was correct :)

      Delete
  3. Hi yoga,

    is 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?

    ReplyDelete
    Replies
    1. Hi Ashneet,

      Not without messing up your thumbnails, nope.. Sorry bout this..

      Delete
  4. Hey, this info is great. Is there any way to make the titles always visible instead of just on the mouse hover over?

    Thanks

    ReplyDelete
    Replies
    1. Yeap, it is possible :)

      Go 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 :)

      Delete
  5. Hey, 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?

    Thank you!

    ReplyDelete
    Replies
    1. Hi nicola,

      Sorry 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 :)

      Delete
  6. Truly you are a genius.

    Can you figure out how to remove the drop shadow upon hover? And perhaps replace it with a single pixel black line?

    cheers

    ReplyDelete
    Replies
    1. Hi Jez,

      Nice 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..

      Delete
    2. You're a gentleman, many thanks.

      http://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.

      Delete
    3. Don't mention it Jez Alder. Glad you've tweaked it as you've wanted :)

      Cheers..

      Delete
  7. Great stuff!
    I 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

    ReplyDelete
    Replies
    1. Hi Joshua,

      I'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 :)

      Delete
    2. You are brilliant. Your promptness to replies is fantastic! thank you!!

      Delete
    3. It 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?

      Delete
    4. Rightt.. Try this:

      .mosaic .article .article-content img:not(.deferred){
      border: 2px solid black !important;
      padding: 0px !important;
      }

      And thanks :)

      Cheerss.

      Delete
  8. Hullo! First of all - thanks for this great site, it should be official blogger help site, due to it's commitment and professionalism.

    1. 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!

    ReplyDelete
    Replies
    1. Hi Teodor,

      1. 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 :)

      Delete
  9. Okay I must be the other person that likes Mosaic,...
    What 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?

    ReplyDelete
    Replies
    1. Hi Paul,

      See 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 :)

      Delete
  10. 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!
    I 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!

    ReplyDelete
    Replies
    1. Hi Douglas, I'm afraid that is not even remotely possible in Dynamic Templates, unfortunately.

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.