revision:
hover the pictures to see the effect
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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;}
<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>
<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>
.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>
<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>
DinnerShowerSailing
<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>