Masonryのギャラリーの画像にホバーしたときに動きを付けてみる

2015年10月29日

今回はMasonryのギャラリーの画像にマウスのカーソルを乗せたときに青い半透明のアニメーションがでるようしてみました。
サンプルコードの実行結果はこちら

今回使用したプラグイン
・Mansonry
・imagesloaded
・colorbox

    *{margin:0;padding:0;}
    ul li{list-style-type:none;}

    .clearfix:before, 
    .clearfix:after { content: " "; display: table; }
    .clearfix:after { clear: both; }

    .pHeader{
        background-color:white;
        margin:0 auto;
        width:100%;
        position:fixed;
        z-index:5;
    }
    .inner{
        padding: 8px 10px;
        margin: auto;
        width:100%;}
    .main{
        margin:0 auto;
        padding: 100px 10px;
        width:100%;
    }

    .filterForm{float:right;}
    .filterForm label{
        font-weight:bold;
        cursor:pointer;
        margin-right:60px;
        padding:0 0.1em;
        -webkit-user-select:none;
    }
        label.ui-state.focus{outline:1px solid;}
        label .ui-icon{
            background:url(img/sprites.png) no-repeat 0 0;
            width:17px;
            height:17px;
            margin-right:0.5em;
            margin-top:2px;
            vertical-align:top;
            display:inline-block;
        }
        .filterForm label.ui-state-active .ui-icon{
            background-position:-20px 0;
        }

    .loadMore{
        background-color:white;
        border:1px solid #f0f0f0;
        display:block;
        padding:1em 0;
        width:100%;
        margin-top:10px;
    }

    .galleryItem{margin-top:10px;}
    .galleryItem a{
        display: block;
        
        /* 外側に配置された子孫要素は見えなくする */
        overflow:hidden;
        position:relative;
    }

    .galleryItem .caption{
        text-align:center;
        background-color: rgba(16, 32, 224, 0.5);
        color:white;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
            box-sizing: border-box;
        
        /* 親要素とおなじ大きさ */
        width:100%;
        height:100%;
        
        position:absolute;
        top:100%;
        left:100%;
    }
    .title {
        display: block;
        font-saptionize: 18px;
        line-height: 1.2;
    }
    .date {
        display: block;
        font-family: "Georgia", serif;
        font-size: 12px;
        font-style: italic;
        line-height: 1.8;
    }
    .ui-helper-hidden-accessible {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        position: absolute;
        width: 1px;
    }

100

101

*{margin:0;padding:0;}

ul li{list-style-type:none;}

.clearfix:before,

.clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

.pHeader{

background-color:white;

margin:0 auto;

width:100%;

position:fixed;

z-index:5;

}

.inner{

padding: 8px 10px;

margin: auto;

width:100%;}

.main{

margin:0 auto;

padding: 100px 10px;

width:100%;

}

.filterForm{float:right;}

.filterForm label{

font-weight:bold;

cursor:pointer;

margin-right:60px;

padding:0 0.1em;

-webkit-user-select:none;

}

label.ui-state.focus{outline:1px solid;}

label .ui-icon{

background:url(img/sprites.png) no-repeat 0 0;

width:17px;

height:17px;

margin-right:0.5em;

margin-top:2px;

vertical-align:top;

display:inline-block;

}

.filterForm label.ui-state-active .ui-icon{

background-position:-20px 0;

}

.loadMore{

background-color:white;

border:1px solid #f0f0f0;

display:block;

padding:1em 0;

width:100%;

margin-top:10px;

}

.galleryItem{margin-top:10px;}

.galleryItem a{

display: block;

/* 外側に配置された子孫要素は見えなくする */

overflow:hidden;

position:relative;

}

.galleryItem .caption{

text-align:center;

background-color: rgba(16, 32, 224, 0.5);

color:white;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

/* 親要素とおなじ大きさ */

width:100%;

height:100%;

position:absolute;

top:100%;

left:100%;

}

.title {

display: block;

font-saptionize: 18px;

line-height: 1.2;

}

.date {

display: block;

font-family: "Georgia", serif;

font-size: 12px;

font-style: italic;

line-height: 1.8;

}

.ui-helper-hidden-accessible {

border: 0;

clip: rect(0 0 0 0);

height: 1px;

margin: -1px;

overflow: hidden;

position: absolute;

width: 1px;

}

index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Masonryギャラリーにホバーしたときに、半透明のアニメーションをつけてみる</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/ui/jquery-ui.js"></script>
    
    <link rel="stylesheet" href="style.css">
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script src="js/masonry.pkgd.min.js"></script>
    
    <link rel="stylesheet" href="colorbox.css">
    <script src="js/jquery.colorbox-min.js"></script>
    <script src="js/galleryFillterHoverEffect.js"></script>

</head>
<body>
    
<header class="pHeader">
    <div class="inner clearfix">
        <h1><a href="#">Gallery Test</a></h1>

        <!--
            画像をフィルタリングするためのフォーム
        -->
        <form class="filterForm" id="galleryFilter">
            <span class="formItem">
                <input type="radio" name="filter" 
                id="filterAll" value="all" checked>
                <label for="filterAll">All</label>
            </span>
            <span class="formItem">
                <input type="radio" name="filter" 
                id="filterUz" value="Uzbekistan">
                <label for="filterUz">Uzbekistan</label>            
            </span>
            <span class="formItem">
                <input type="radio" name="filter" 
                id="filterKy" value="kirgis">
                <label for="filterKy">Kyrgis</label>
            </span>
            <span class="formItem">
                <input type="radio" name="filter" 
                id="filterKa" value="Kazakhstan">
                <label for="filterKa">Kazakhstan</label>
            </span>
            <span class="formItem">
                <input type="radio" name="filter" 
                id="filterRu" value="Russia">
                <label for="filterRu">Russia</label>
            </span>
        </form>
    </div>
</header>
    
    <div class="main">
        <ul class="gallery" id="gallery"></ul>
        
        <!--
            画像を追加で読み込むボタンを表示
        -->
        <button class="loadMore" 
               id="loadMore">More</button>
    </div>
    
</body>
</html>

<!doctype html>

<html>

<head>

<title>Masonryギャラリーにホバーしたときに、半透明のアニメーションをつけてみる</title>

</head>

<body>

<h1><a href="#">Gallery Test</a></h1>

<!--

画像をフィルタリングするためのフォーム

-->