Mosaic – Sliding Boxes

[powersslade]

hello, i’m hoping someone can help me. i’m using a mosaic sliding box with the emporium template in my presentation but the transition or the slide on the slide box is sliding first from the bottom to the top as opposed to the like the template that slides the overlay across from left to right. it slides in random directions, sometime the overlay moves diagonally then across from right to left until it sets in place. it’s the worst in firefox but works well in ie. how may i stop this?

[powersslade]

i have been looking over and over at the mosaic.css file and i get nothing. I understand html and intermediate /css/. but this has me a little stumped because i don’t see anything in the style sheet that designates a transition. there is a mosaic-.js file but reading the code i don’t see any transition/animation outside of fade & slide. yet and still i get these transitions/animation in the box. please help

[ronpat]

We will need to see the code that is showing the problem. A link to your page with a clear description of where to look would probably be the easiest. A “working page” that demonstrates the issue would work if you know how to set it up with complete URLs to resources, etc.

The more information you can give us, the more effectively we can help. If you think about it, it is very presumptive of any poster to assume that we are familiar with all of the plug-ins, frameworks, and JS modules that are available on the internet nowadays.

[powersslade]

Thanks for your reply. I sought this forum out because it came up in google with a post from 2014 with a person having css issues not similar to mine but with the same slider. i don’t know if the matter ever got resolved, nevertheless, that’s why i’m here.
with regard to the code i don’t know where it’s breaking at. the site name is sbhorizons .com. if you look at the 3 sliding boxes about mid page you’ll see that the first box does the transitioning thing that i don’t desire. the other 2 do not. i want them all to be as box 2 & 3 are with the horizontal animation.

the code to both the html & css are as follows:
html

  <div id="latestworkContainer">
    <div class="one-third">
      <div align="center">Quote Of The Day</div>
      <div class="mosaic-block cover"> <img src="img/SBHorizons_quoteotheday.png" title="" alt="" />
        <div class="mosaic-overlay"> <img src="img/SBHorizons_meditate.png" title="" alt="" /> </div>
      </div>
    </div>
    <!-- end one-third -->
    <div class="one-third">
      <div align="center">Tip O' The Day</div>
      <div class="mosaic-block cover">
        <div class="mosaic-overlay"> <img src="img/sbhorizons_how_to.jpg" title="" alt="" /> </div>
      </div>
      <div align="center"></div>
    </div>
    <!-- end one-third -->
    <div class="one-third lastCol">
      <div align="center">What's New Today</div>
      <div class="mosaic-block cover">
        <div class="mosaic-overlay"> 
          <div align="center"><img src="img/sbhorizons_nutrition.jpg" title="" alt="" /> </div>
        </div>
      </div>
    </div>
    <!-- end one-third --> 
  </div>
  <!-- end latestworkContainer --> 
type or paste code here
css:
/*
	Mosaic - Sliding Boxes and Captions jQuery Plugin
	Version 1.0.1
	www.buildinternet.com/project/mosaic
	
	By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
	Released under MIT License / GPL License
*/

* {
	margin:0;
	padding:0;
	border:none;
	outline:none;
}
/*General Mosaic Styles*/
.mosaic-block {
	float:left;
	position:relative;
	overflow:hidden;
	width:300px;
	height:140px;
	background:#5f6d88 url(../img/hover-magnify.png) no-repeat center center;
	;
}
.mosaic-backdrop {
	display:none;
	position:absolute;
	top:0;
	height:100%;
	width:100%;
	background:#111;
}
.mosaic-overlay {
	display:none;
	z-index:5;
	position:absolute;
	width:100%;
	height:100%;
	background:#111;
}
/*** Custom Animation Styles (You can remove/add any styles below) ***/
		.circle .mosaic-overlay {
	background:url(../img/hover-magnify - Copy.png) no-repeat center center;
	opacity:0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
	filter:alpha(opacity=00);
	display:none;
}
.fade .mosaic-overlay {
	opacity:0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
	filter:alpha(opacity=00);
	background:url(../img/bg-black.png);
}
.bar .mosaic-overlay {
	bottom:-100px;
	height:100px;
	background:url(../img/bg-black.png);
}
.bar2 .mosaic-overlay {
	bottom:-50px;
	height:100px;
	opacity:0.8;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter:alpha(opacity=80);
}
.bar2 .mosaic-overlay:hover {
	opacity:1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter:alpha(opacity=100);
}
.bar3 .mosaic-overlay {
	top:-100px;
	height:100px;
	background:url(../img/bg-black.png);
}

there is a file marked mosaic.1.0.1.js but i don’t believe it is of any consequence.
thank you. again.

[PaulOB]

Hi,

I’m not sure how this is supposed to work but surely the first image should be on top top to start with and then reveal the quote of the day underneath?

This can be achieved simply with this code but I feel it you may have had something else in mind.

.mosaic-overlay{top:0!important;}

[powersslade]

thank you so much. you nailed it. can you tell me how you knew that was the missing code? it works perfectly. i appreciate your help ronpat. this is a xlnt forum.

[PaulOB]

I just looked in the developer tools and saw that top was being animated on the offending element so I just made sure that top was always zero.

It may not be the way it was supposed to be done but does correct the issue. I’d need to look at the documentation to be sure but sometimes it’s easier to just fix it :).