images effects

revision:

Content

no effect zoom in zoom out slide rotate (+ zoom out) blur gray scale sepia blur + gray scale opacity flashing shine circle text rotate

hover the pictures to see the effect

no effect

top
picture
picture
picture
code:
            <div id="column_A">
                <div><figure><img src=".../images/7aa.jpg" /></figure><span>hover</span></div>
                <div><figure><img src=".../images/3aa.jpg" /></figure><span>hover</span></div>
                <div><figure><img src=".../images/4aa.jpg" /></figure><span>hover</span></div>
            </div>
            <style>
                #column_A {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                #column_A:last-child {padding-bottom: 1vw;} 
                #column_A::after {content: '';clear: both; display: block;}
                #column_A div:first-child {margin-left: 1vw;}
                #column_A div span {position: absolute;bottom: -3vw; left: 0; z-index: -1; display: block; width: 5vw; 
                    margin: 0; padding: 0; color: red; font-size: 1.5vw; text-decoration: none; text-align:left; 
                    -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;opacity: 0;}
                img{width: 7vw; margin-left: 1vw;}
                figure:hover+span {bottom: -2vw; opacity: 1.5; }
            </style>

zoom in

top
picture
picture
picture
picture
picture
picture
code: 
            <div class="grid_A">
                <div class="hover-01 column_B">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
                <div class="hover-02 column_C">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
            </div>
            <style>
                .column_B {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_B::after {content: '';clear: both; display: block;}
                .column_B div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-01 figure img {-webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
                .hover-01 figure:hover img { -webkit-transform: scale(1.3); transform: scale(1.3);}
        
                .column_C {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_C::after {content: '';clear: both; display: block;}
                .column_C div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-02 .column_C figure img {width: 100%; height: auto; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
                .hover-02 figure:hover img {width: 10vw;}
            </style>

zoom out

top
picture
picture
picture
picture
picture
picture
code: 
           
            <div class="grid_A">
                <div class="hover-03 column_D">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
                <div class="hover-04 column_E">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
            </div>
            <style>
                .column_D {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_D::after {content: '';clear: both; display: block;}
                .column_D div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-03 figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
                .hover-03 figure:hover img {-webkit-transform: scale(0.7); transform: scale(0.7);}
        
                .column_E {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_E::after {content: '';clear: both; display: block;}
                .column_E div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-04 .column_E figure img { width: 100%; height: auto; -webkit-transition: .6s ease-in-out; transition: .6s ease-in-out;}
                .hover-04 figure:hover img {width: 80%; -webkit-transition: all 0.8s; transition: all 0.8s;}
            </style>

slide

top
picture
picture
picture
picture
picture
picture
code: 
            <div class="grid_A">
                <div class="hover-05 column_F">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
                <div class="hover-055 column_FF">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
            </div>
            <style>
                .column_F {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_F::after {content: '';clear: both; display: block;}
                .column_F div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 1vw; padding: 0;}
                .hover-05 figure img {margin-left: 3vw; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out;transition: .3s ease-in-out;}
                .hover-05 figure:hover img {margin-left: 0;}
                .column_FF {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_FF::after {content: '';clear: both; display: block;}
                .column_FF div {position: relative; float:right; width: 30%; height: 30%; margin: 0 1vw 0 0; padding: 0;}
                .hover-055 figure img {margin-left: 1vw; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out;transition: .3s ease-in-out;}
                .hover-055 figure:hover img {margin-left: 4vw;}
            </style>

rotate(+ zoom out)

top
picture
picture
picture
picture
picture
picture
code: 
            <div class="grid_A">
                <div class="hover-06 column_G">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
                <div class="hover-066 column_GG">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
            </div>
            <style>
                .column_G {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_G::after {content: '';clear: both; display: block;}
                .column_G div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-06 figure img { -webkit-transform: rotate(15deg) scale(1); transform: rotate(15deg) scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
                .hover-06 figure:hover img {-webkit-transform: rotate(0) scale(0.7); transform: rotate(0) scale(0.7);}
                .column_GG {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_GG::after {content: '';clear: both; display: block;}
                .column_GG div {position: relative; float:left; width: 30%; height: 30%; margin: 0 3vw 0 0; padding: 0;}
                .hover-066 figure img { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
                .hover-066 figure:hover img {-webkit-transform: rotate(15deg) scale(0.7); transform: rotate(15deg) scale(0.7);}
        
            </style>

blur

top
picture
picture
picture
picture
picture
picture
code: 
            <div class="grid_A">
                <div class="hover-07aa column_H">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
                <div class="hover-07ab column_HH">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
            </div>
            <style>
                .column_H {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_H::after {content: '';clear: both; display: block;}
                .column_H div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-07aa figure img { -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
                .hover-07aa figure:hover img {-webkit-filter: blur(0); filter: blur(0);}
        
                .column_HH {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_HH::after {content: '';clear: both; display: block;}
                .column_HH div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-07ab figure img { -webkit-filter: blur(0px); filter: blur(0px); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
                .hover-07ab figure:hover img {-webkit-filter: blur(4px); filter: blur(4px);}
        
            </style>

gray scale

top
picture
picture
picture
picture
picture
picture
code: 
            <div class="grid_A">
                <div class="hover-08 column_I">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
                <div class="hover-088 column_II">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
            </div>
            <style>
                .column_I {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_I::after {content: '';clear: both; display: block;}
                .column_I div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-08 figure img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
                .hover-08 figure:hover img {-webkit-filter: grayscale(0); filter: grayscale(0);}
        
                .column_II {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_II::after {content: '';clear: both; display: block;}
                .column_II div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-088 figure img { -webkit-filter: grayscale(0); filter: grayscale(0); -webkit-transition: .8s ease-in-out; transition: .8s ease-in-out;}
                .hover-088 figure:hover img {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
            </style>

sepia

top
picture
picture
picture
picture
picture
picture
code: 
            <div class="grid_A">
                <div class="hover-09 column_J">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
                <div class="hover-099 column_JJ">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
                
            </div>
            <style>
                .column_J {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_J::after {content: '';clear: both; display: block;}
                .column_J div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-09 figure img {-webkit-filter: sepia(100%); filter: sepia(100%);-webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
                .hover-09 figure:hover img { -webkit-filter: sepia(0); filter: sepia(0);}
        
                .column_JJ {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_JJ::after {content: '';clear: both; display: block;}
                .column_JJ div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-099 figure img {-webkit-filter: sepia(0%); filter: sepia(0%);-webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;}
                .hover-099 figure:hover img { -webkit-filter: sepia(100%); filter: sepia(100%);}
            </style>

blur + gray scale

top
picture
picture
picture
picture
picture
picture
code: 
            <div class="grid_A">
                <div class="hover-10 column_K">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
                <div class="hover-1010 column_KK">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
            </div>
            <style>
                .column_K {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_K::after {content: '';clear: both; display: block;}
                .column_K div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-10 figure img {-webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
                .hover-10 figure:hover img { -webkit-filter: grayscale(100%) blur(5px); filter: grayscale(100%) blur(5px);}
        
                .column_KK {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_KK::after {content: '';clear: both; display: block;}
                .column_KK div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-1010 figure img {-webkit-filter: grayscale(100%) blur(10px); filter: grayscale(100%) blur(10px); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
                .hover-1010 figure:hover img { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0x);}
            </style>

opacity

top
picture
picture
picture
picture
picture
picture
code: 
            
            <div class="grid_A">
                <div class="hover-11 column_L">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
                <div class="hover-12 column_M">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
            </div>
            <style>
                .column_L {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_L::after {content: '';clear: both; display: block;}
                .column_L div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-11 figure img {opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
                .hover-11 figure:hover img {opacity: .5;}
        
                .column_M {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                .column_M::after {content: '';clear: both; display: block;}
                .column_M div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-12 figure img {opacity: 0.5; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
                .hover-12 figure:hover img {opacity: 1;}

flashing

top
picture
picture
picture
picture
picture
picture
code: 
           
            <div class="grid_A">
                <div class="hover-13 column_N">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
                <div class="hover-1313 column_NN">
                    <div><figure><img src=".../images/7aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/3aa.jpg" /></figure></div>
                    <div><figure><img src=".../images/4aa.jpg" /></figure></div>
                </div>
            </div>
            <style>
                .column_N {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                column_N::after {content: '';clear: both; display: block;}
                .column_N div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-13 figure:hover img {opacity: 1; -webkit-animation: flash 1.5s; animation: flash 1.5s;}
                @-webkit-keyframes flash {
                    0% {opacity: .4;}
                    100% {opacity: 1;}
                }
                @keyframes flash {
                    0% {opacity: .4;}
                    100% {opacity: 1;}
                }
        
                .column_NN {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                column_NN::after {content: '';clear: both; display: block;}
                .column_NN div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .hover-1313 figure:hover img {opacity: 1; -webkit-animation: flash1 1.5s; animation: flash 1.5s;}
                @-webkit-keyframes flash1 {
                    0% {opacity: 1;}
                    100% {opacity: 0.4;}
                }
                @keyframes flash1 {
                    0% {opacity: 1;}
                    100% {opacity: 0.4;}
                }
            </style>

shine

top
picture
hover
picture
hover
picture
hover
code: 
            
            <div class="hover-14 column_O">
                <div><figure><img src=".../images/7aa.jpg" /></figure><span>hover</span></div>
                <div><figure><img src=".../images/3aa.jpg" /></figure><span>hover</span></div>
                <div><figure><img src=".../images/4aa.jpg" /></figure><span>hover</span></div>
            </div>
            <style>
                .column_O {margin: 1vw 15vw 0;margin: 1vw;}
                .column_O:last-child {padding-bottom: 3vw;}
                .column_O img{width: 20vw; height: auto;}
                .column_O::after {content: '';clear: both; display: block;}
                .column_O div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .column_O div:first-child { margin-left: 0;}
                .column_O div span {position: absolute;bottom: -3vw; left: 0; z-index: -1; display: block; width: 5vw; margin: 0; padding: 0; color: red; font-size: 1.5vw; text-decoration: none; text-align:left;
                     -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;opacity: 0;}
                .hover-14 figure {position: relative;}
                .hover-14 figure::before{ position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background:  -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,
                 rgba(255, 255,255,.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg);}
                .hover-14 figure:hover::before {-webkit-animation: shine .75s; animation: shine .75s;}
                @-webkit-keyframes shine {
                    100% {left: 125%;}
                }
                @keyframes shine {
                    100% { left: 125%;}
                }
            </style>

circle

top
picture
picture
picture
code: 
 
            <style>           
                .column_P {margin: 1vw 15vw 0;padding: 0;}
                .column_P:last-child {padding-bottom: 3vw;}
                .column_P::after {content: '';clear: both; display: block;}
                .column_P img{width: 20vw; height: auto;}
                .column_P div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .column_P div:first-child { margin-left: 0;}
                .column_P div span {position: absolute;bottom: -3vw; left: 0; z-index: -1; display: block; width: 5vw; margin: 0; padding: 0; color: red; font-size: 1.5vw; text-decoration: none; text-align:left; 
                    -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;opacity: 0;}
                .hover-15 figure {position: relative;}
                .hover-15 figure::before {position: absolute; top: 50%; left: 50%; z-index: 2; display: block; content: ''; width: 0; height: 0; background: rgba(255,255,255,.2); border-radius: 100%; 
                -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);  opacity: 0;}
                .hover-15 figure:hover::before {-webkit-animation: circle .75s; animation: circle .75s;}
                @-webkit-keyframes circle {
                    0% {opacity: 1;}
                    40% {opacity: 1;}
                    100% {width: 200%;height: 200%; opacity: 0;}
                }
                @keyframes circle {
                    0% {opacity: 1;}
                    40% {opacity: 1;}
                    100% { width: 200%; height: 200%; opacity: 0;}
                }
            </style>

text

top
picture

Ready for dinner

hover
picture

Ready for a shower

hover
picture

Ready to sail

hover
code: 
            
            <div class="hover-16 column_Q">
                <div>
                    <figure class="snip1"><img src=".../images/7aa.jpg" />
                        <figcaption><h2>Ready for dinner</h2></figcaption>
                    </figure>
                    <span>hover</span>
                </div>
                <div>
                    <figure class="snip1"><img src=".../images/3aa.jpg" />
                        <figcaption><h2>Ready for a shower</h2></figcaption>  
                    </figure>
                    <span>hover</span>
                </div>
                <div>
                    <figure class="snip1"><img src=".../images/4aa.jpg" />
                        <figcaption><h2>Ready to sail</h2></figcaption>
                    </figure>
                    <span>hover</span>
                </div>
            </div>
            <style>
                .column_Q {margin: 1vw 15vw 0;padding: 0;}
                .column_Q:last-child {padding-bottom: 3vw;}
                .column_Q::after {content: '';clear: both; display: block;}
                .column_Q img{width: 30vw; height: auto;}
                .column_Q div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                .column_Q div:first-child { margin-left: 0;}
                .column_Q div span {position: absolute;bottom: -3vw; left: 0; z-index: -1; display: block; width: 5vw; margin: 0; padding: 0; color: red; font-size: 1.5vw; text-decoration: none; text-align:left; 
                    -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;opacity: 0;}
                .snip1{position: relative; overflow: hidden; margin: 1vw; min-width:10vw; max-width:30vw; width:100%; text-align: center;}
                figure.snip1 *{-webkit-box-sizing: border-box; box-sizing: border-box;}
                figure.snip1 img{opacity: 1; width: 100%; -webkit-transition: opacity 0.35s; transition: opacity .35s;}
                figure.snip1 figcaption{position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: left;}
                figure.snip1 figcaption > div{float:left; height: 100%; overflow: hidden; width: 50%; position: relative;}
                figure.snip1 figcaption::before {position: absolute; top: 50%; bottom: 50%; left: 50%; width: 0.3vw; content: ''; opacity: 0; background-color: lightblue;-webkit-transition: all 0.4s; 
                transition: all 0.4s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s;}
                figure.snip1 h2{ margin: 0; padding: 10vw; color: red; opacity: 0; position: absolute; top: 0; width: 100%; left: 0; -webkit-transition: opacity 0.45s, -webkit-transform 0.45s; 
                    transition: opacity 0.45s,-webkit-transform 0.45s,-moz-transform 0.45s,-o-transform 0.45s,transform 0.45s;}
                figure.snip1 h2 {text-align: left;  display: inline-block; word-spacing: -0.2vw; font-weight: 300; text-transform: uppercase; bottom: 0; background: rgba(0,0,0,0.1); 
                    -webkit-transform: translate3d(50%, 0%, 0); transform: translate3d(50%, 0%, 0);-webkit-transition-delay: 0s;transition-delay: 0s;}
                figure.snip1:hover img {opacity: 1;}
                figure.snip1:hover figcaption h2{-webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); -webkit-transition-delay: 0.3s; transition-delay: 0.3s;}
                figure.snip1:hover figcaption h2 {opacity: 1;}
                figure.snip1:hover figcaption::before {background: lightgreen; top: 0vw;  bottom: 0vw;  opacity: 0.5; -webkit-transition-delay: 0s; transition-delay: 0s;}
            </style>

rotate

top
picture
pictureDinner
picture
pictureShower
picture
pictureSailing
code: 
            
            <div class="hover-17aa column_R">
                <div class="card">
                        <div class="front"><img src=".../images/7aa.jpg"/><span class="fa fa-user"></span></div>
                        <div class="back" ><img src=".../images/7aa.jpg"/>Dinner</div>
                    </div>
                </div>
                <div class="hover-17aa column">
                    <div class="card">
                        <div class="front"><img src=".../images/3aa.jpg"/><span class="fa fa-cogsr"></span></div>
                        <div class="back"><img src=".../images/3aa.jpg"/>Shower</div>
                    </div> 
                </div>
                <div class="hover-17aa column">
                    <div class="card">
                        <div class="front"><img src=".../images/4aa.jpg"/><span class="fa fa-fas"></span></div>
                        <div class="back"><img src=".../images/4aa.jpg"/>Sailing</div>
                    </div>
                </div>
                <style>
                    .column_R{display: grid; grid-template-columns: 1fr 1fr 1fr; width: 30vw;}
                    .column_R:last-child {padding-bottom: 3vw;}
                    .column_R::after {content: '';clear: both; display: block;}
                    .column_R div {position: relative; float:left; width: 30%; height: 30%; margin: 0 0 0 3vw; padding: 0;}
                    .column_R div:first-child { margin-left: 0;}
                    .column_R div span {position: absolute;bottom: -3vw; left: 0; z-index: -1; display: block; width: 5vw; 
                    margin: 0; padding: 0; color: red; font-size: 1.5vw; text-decoration: none; text-align:left; 
                    -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;opacity: 0;} 
                    .hover-17aa{perspective: 150vw; text-align: center;} 
                    .hover-17aa .card{position: relative; width: 100%; height: auto; transition: all 0.6s ease; 
                    transform-style: preserve-3d;}
                    .front, .back {position: relative; width: 100%; height: auto; background: #FEC606; font-size: 2vw; 
                    top: 0;left: 0; border-radius: 0.5vw; color: blue; box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3),
                        0 17px 17px 0 rgba(0, 0, 0, 0.15); backface-visibility: hidden;}
                    .hover-17aa:hover .card {transform: rotateY(180deg);}
                    .back {transform: rotateY(180deg);}
                </style>