<a class="imageHover fade" href=""><img src="IMG1.jpg" alt=""></a><span>ふわっと</span>

<a class="imageHover gradation" href=""><img src="IMG2.jpg" alt=""></a><span>色付け</span>

<a class="imageHover mono" href=""><img src="IMG3.jpg" alt=""></a><span>通常 → モノトーン</span>

<a class="imageHover mono reverse" href=""><img src="IMG3.jpg" alt=""></a><span>モノトーン → 通常</span>

<a class="imageHover zoomCaption" href="#">
    </a>

<a class="imageHover zoomCaption" href="#">
</a><span>画像ズーム</span>

<a class="imageHover captionUp" href="#">
    </a>

<a class="imageHover captionUp" href="#">
</a><span>下からキャプション</span>

/* ##################################
　画像マウスオーバーアクション
################################## */

/* ========================
　ふわっと
======================== */
.imageHover.fade {
    -webkit-transition: opacity .8s ease;
       -moz-transition: opacity .8s ease;
        -ms-transition: opacity .8s ease;
         -o-transition: opacity .8s ease;
            transition: opacity .8s ease;
}
.imageHover.fade:hover {opacity: .4;}

/* ========================
　色付け
======================== */
.imageHover.gradation {
    display:block;
    position:relative;
}
.imageHover.gradation:before {
    -webkit-transition: opacity 0.5s ease-out;
       -moz-transition: opacity 0.5s ease-out;
        -ms-transition: opacity 0.5s ease-out;
         -o-transition: opacity 0.5s ease-out;
            transition: opacity 0.5s ease-out;
    opacity: 0;
    content:"";
    mix-blend-mode: color;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    background: -webkit-linear-gradient(90deg, #f01fb6 0%, #072bd6 100%);
    background: -webkit-linear-gradient(bottom, #f01fb6 0%, #072bd6 100%);
    background: linear-gradient(0deg, #f01fb6 0%, #072bd6 100%);
    width:100%;
    height:100%;
}
.imageHover.gradation:hover:before {opacity:1;}

/* ========================
　通常 → モノトーン
======================== */
.imageHover.mono {
    display:block;
    position:relative;
}
.imageHover.mono:before {
    -webkit-transition: opacity 0.5s ease-out;
       -moz-transition: opacity 0.5s ease-out;
        -ms-transition: opacity 0.5s ease-out;
         -o-transition: opacity 0.5s ease-out;
            transition: opacity 0.5s ease-out;
    opacity: 0;
    content:"";
    mix-blend-mode: color;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    background:#cccccc;
    width:100%;
    height:100%;
}
.imageHover.mono:hover:before {opacity:1;}

/* ========================
　モノトーン → 通常
======================== */
.imageHover.mono.reverse {
    display:block;
    position:relative;
}
.imageHover.mono.reverse:before {
    -webkit-transition: opacity 0.5s ease-out;
       -moz-transition: opacity 0.5s ease-out;
        -ms-transition: opacity 0.5s ease-out;
         -o-transition: opacity 0.5s ease-out;
            transition: opacity 0.5s ease-out;
    opacity: 1;
    content:"";
    mix-blend-mode: color;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    background:#cccccc;
    width:100%;
    height:100%;
}
.imageHover.mono.reverse:hover:before {opacity:0;}

/* ========================
　画像ズーム＋キャプション表示
======================== */
.imageHover.zoomCaption {
    display:block;
    overflow: hidden;
}
.imageHover.zoomCaption figure {
    position:relative;
    overflow: hidden;
    margin: 0;
    text-align: center;
}
.imageHover.zoomCaption figure:before,
.imageHover.zoomCaption figcaption {
    -webkit-transition:all 0.25s ease-in-out;
       -moz-transition:all 0.25s ease-in-out;
        -ms-transition:all 0.25s ease-in-out;
         -o-transition:all 0.25s ease-in-out;
            transition:all 0.25s ease-in-out;
    opacity: 0;
    position:absolute;
    left:0;
    width:100%;
}
.imageHover.zoomCaption figure:before {
    content:"";
    display:block;
    z-index:5;
    background-color: rgba(0,0,0,0.4);
    top:0;
    height:100%;
}
.imageHover.zoomCaption figcaption {
    transform:translateY(-50%);
    top: 50%;
    z-index:6;
    text-align: center;
    color: #FFF;
    font-size: 16px;
}
.imageHover.zoomCaption img {
    -webkit-transition:all 0.25s ease-in-out;
       -moz-transition:all 0.25s ease-in-out;
        -ms-transition:all 0.25s ease-in-out;
         -o-transition:all 0.25s ease-in-out;
            transition:all 0.25s ease-in-out;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
.imageHover.zoomCaption:hover figure img {
    -webkit-transform:scale(1.10,1.10);
       -moz-transform:scale(1.10,1.10);
        -ms-transform:scale(1.10,1.10);
         -o-transform:scale(1.10,1.10);
            transform:scale(1.10,1.10);
}
.imageHover.zoomCaption:hover figure:before,
.imageHover.zoomCaption:hover figcaption {opacity:1;}

/* ========================
　下からキャプション表示
======================== */
.imageHover.captionUp {
    display:block;
    overflow:hidden;
}
.imageHover.captionUp figure {
    position:relative;
    overflow: hidden;
    margin: 0;
    text-align: center;
}
.imageHover.captionUp figcaption {
    -webkit-transition:all 0.25s ease-in-out;
       -moz-transition:all 0.25s ease-in-out;
        -ms-transition:all 0.25s ease-in-out;
         -o-transition:all 0.25s ease-in-out;
            transition:all 0.25s ease-in-out;
    display:block;
    position:absolute;
    bottom:-80px;
    background:rgba(0,0,0,0.6);
    padding:1em;
    width:100%;
    color:#fff;
    font-size:12px;
}
.imageHover.captionUp:hover figcaption {bottom:0;}