Profile Card hover over it once

Video Link : https://youtu.be/M_6xK130_A8

Table

CREATE TABLE PROFILE(

ID NUMBER,

NAME VARCHAR2(50),

YOUTUBE_LINK VARCHAR2(100),

FACEBOOK_LINK VARCHAR2(100),

TWITTER_LINK VARCHAR2(100),

IMAGE BLOB);

Query 

select ID,

       NAME NAME,

       YOUTUBE_LINK,

       FACEBOOK_LINK,

       TWITTER_LINK,

        decode(nvl(dbms_lob.getlength(IMAGE),0),0,null,

       '<img class="fancybox" alt="'||apex_escape.html_attribute(ID)||'" title="'||apex_escape.html_attribute(ID)

              ||'" style="border: 4px solid #CCC; -moz-border-radius: 4px; -webkit-border-radius: 4px;" '

              ||'src="'||apex_util.get_blob_file_src('P17_IMAGE',ROWID)||'" height="75" width="75" />

      ') IMAGE

  from PROFILE

HTML

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

<div class="image-area">

<div class="img-wrapper">

#IMAGE#

<h2>#NAME#</h2>

<ul>

<li><a href=#GIT#><i class="fab fa-github"></i></a></li>
<li><a href=#INS#><i class="fab fa-instagram"></i></a></li>
<li><a href=#TWITTER_LINK#><i class="fab fa-twitter"></i></a></li>
<li><a href=#YOUTUBE_LINK#><i class="fab fa-youtube"></i></a></li>
<li><a href=#FACEBOOK_LINK#><i class="fab fa-facebook"></i></a></li>

</ul>

</div>

</div>

CSS

*

.image-area{ top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute;}
.img-wrapper{ width: 300px; height: 400px; position: relative; overflow: hidden;}
.img-wrapper:before{ content: ''; position: absolute; top: 0; left: 180%; height: 100%; width: 100%; background: rgba(255,255,255,.3); z-index: 1; transform: skew(45deg); transition: .5s;}
.img-wrapper:hover:before{ left: -180%;}
.img-wrapper img{ height: 400px; width: 300px; filter: grayscale(100%); transition: 2s;}.img-wrapper:hover img{ filter: grayscale(0%); transform: scale(1.1);}
.img-wrapper h2{ background: tomato; font-family: Poppins; color: #fff; text-align: center; text-transform: uppercase; margin: 0; padding: 10px 0; position: absolute; bottom: 0; width: 100%; transform: perspective(400px) rotateY(90deg); transform-origin: right; transition: 1s;}
.img-wrapper:hover h2{ transform: perspective(400px) rotateY(0deg);}
.img-wrapper ul{ position: absolute; top: 0; left: 0; margin: 0; padding: 0; list-style: none; background: rgba(255,255,255,0);}
.img-wrapper ul li{ background: #333; height: 40px; width: 40px; text-align: center; line-height: 40px; transform: perspective(800px) rotateY(90deg); transition: .5s; transform-origin: left;}
.img-wrapper:hover ul li{ transform: perspective(800px) rotateY(0deg);}
.img-wrapper:hover ul li:nth-child(1){ transition-delay: .2s;}
.img-wrapper:hover ul li:nth-child(2){ transition-delay: .6s;}
.img-wrapper:hover ul li:nth-child(3){ transition-delay: .8s;}
.img-wrapper:hover ul li:nth-child(4){ transition-delay: 1s;}
.img-wrapper ul li a{ color: tomato; background: rgba(255,255,255,0);}
.img-wrapper ul li i{ color: tomato; background: rgba(255,255,255,0);}
.img-wrapper ul li i:hover{ color: #fff; background: rgba(255,255,255,0);}