MovableType×Mosaic

movable-type MovableType×Mosaic
最終更新日: 2023年4月15日

サムネイル画像にキャプションを表示、ホバリングでキャプションのスライド表示をするスクリプト。
—htmlヘッダ—

<script src="<mt:BlogURL>js/mosaic.1.0.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
$('.bar2').mosaic({
animation : 'slide',
});
});
</script>


—表示部分html—

<div id="index-cases">
<mt:Entries>
<div class="mosaic-block bar2" style="background-image:url(<MTEntryAssets sort_by="file_name" sort_order="ascend" lastn="1"><$MTAssetURL$></MTEntryAssets>)">
<a class="mosaic-overlay" href="<mt:EntryPermaLink>">
<h3>
<span class="date">
<mt:CategoryLabel>
</span>
<br />
<mt:EntryTitle>
<span class="caption-box">
<mt:EntryCategories>
<span class="date">
<mt:CategoryLabel>
</span><br />
</mt:EntryCategories>
</span>
</h3>
</a>
</div>
</mt:Entries>
</div>


—CSS—

div#index-cases {
display:inline-block;
width:100%;
margin:0 0 100px 0;
}
div#index-cases p.heading {
width:980px;
margin:0 auto;
line-height:1;
}
div#index-cases div {
float:left;
position:relative;
width:24.97%;
margin:0 0.035% 1px 0;
height:16vw;
background-color:#eee;
background-position:center center;
background-size:cover;
}
div#index-cases div:nth-child(4n) {
float:right;
margin:0;
}
div#index-cases div a {
width:100%;
height:100%;
display:block;
}
div#index-cases div h3 {
display:block;
width : -webkit-calc(100% - 20px) ;
width: -moz-calc(100% - 20px);
width : calc(100% - 20px) ;
height:100%;
padding:0 10px;
background-image:url(../object/p_13.png);
font-size:16px;
font-size:1rem;
line-height:1.4;
letter-spacing:0;
color:#fff!important;
}
div#index-cases div h3 span.caption-box {
display:block;
padding:20% 0 0 0;
font-size:10px;
font-size:0.63rem;
line-height:1.6;
}
div#index-cases div h3 span.date {
display:inline;
color:#fff;
}
/*General Mosaic Styles*/
.mosaic-block {
float:left;
position:relative;
overflow:hidden;
}
.mosaic-backdrop {
display:none;
position:absolute;
top:0;
height:100%;
width:100%;
}
.mosaic-overlay {
display:none;
z-index:2;
position:absolute;
width:100%;
height:100%;
}
/*** Custom Animation Styles (You can remove/add any styles below) ***/
.bar2 .mosaic-overlay {
bottom:-60%;
height:100%;
}