Prince Jaiswal
Fig Caption | Hover Effect In Css

Fig Caption | Hover Effect In Css

Prince Jaiswal's photo
Prince Jaiswal
·

2 min read

A Fig Caption Hover Effect In Css .

Here , We go With Html Code :-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Css Figure & Figcaption</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <figure>
      <img
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/577128/toucan-by-william-warby.jpg"
        alt="Toucan photo by William Warby"
      />
      <figcaption>
        <span>Fig.1</span>
        <span>Tou</span>
        <span>Can</span>
        <span>(/ˈtuːkæn/, UK: /-kən/)</span>
      </figcaption>
    </figure>
  </body>
</html>

Here , Css Code :-

@import url('https://fonts.googleapis.com/css?family=Lato|Sedgwick+Ave+Display');

:root {
  --font-display: 'Sedgwick Ave Display';
  --font-sans-serif: 'Lato';
  --box-shadow: 0px 21px 32px 0px rgba(8, 40, 34, 0.89);
  --color-bg: #0d3029;
  --grad-bright: linear-gradient(-55deg, #8fc2c9 0%, #bee0e5 100%);
  --grad-dark: linear-gradient(-55deg, #248391 0%, #8fc2c9 100%);
  --fig-width: 380px;
  --fig-height: 255px;
  --delay-base: 500ms;
  --delay-added: 100ms;
  --acc-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

*,
*:before,
*:after{
  box-sizing:border-box;
  -webkit-tap-highlight-color: rgba(255,255,255,0);
}

body{
  width: 100vw; height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

img{
  width: 100%;
  height: auto;
  border-radius: 2px 34px;
  box-shadow: var(--box-shadow);
  animation: popInImg 700ms var(--acc-back) 1 forwards;
  animation-delay: var(--delay-base);
  opacity: 0;
  transform: skewY(1deg);
}

figure{
  position: relative;
  width: var(--fig-width);
  height: var(--fig-height);
  transition: transform 600ms var(--acc-back);
}

figure:hover{
  transform: scale(1.05) skewY(-1deg);
}

figcaption{
  transition: transform 600ms var(--acc-back), opacity 100ms ease-in;
  height: inherit;
  position: absolute;
  top: 0; left; 0;
  width: 100%; 
  height: 100%;
}

figure:hover figcaption{
  opacity: 0;
  transform: scale(.91);
}

@keyframes popInImg{
  0%{
    transform: skewY(5deg) scaleX(.89) scaleY(.89);
    opacity: 0;
  }
  100%{
    opacity: 1;    
  }
}

figcaption span{
  position: absolute;
  display: block;
  background: var(--grad-bright);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-sans-serif);
  transform: skewY(-13deg);
  text-shadow: var(--box-shadow);
  animation: popIn 600ms var(--acc-back) 1 forwards;
  opacity: 0;
}

@keyframes popIn{
  0%,13%{
    transform: scaleX(.89) scaleY(.75);
    opacity: 0;
  }
  100%{
    transform: skewY(-13deg);
    opacity: 1;    
  }
}

figcaption span:nth-of-type(1){
  top: -44px; left: 44px;
  font-size: 21px;
  animation-delay: calc(var(--delay-base) + 1 * var(--delay-added));
}

figcaption span:nth-of-type(2){
  top: -34px; left: -21px;
  font-size: 89px;
  font-family: var(--font-display);
  animation-delay: calc(var(--delay-base) + 2 * var(--delay-added));
}

figcaption span:nth-of-type(3){
  bottom: -38px; right: -21px;
  font-size: 89px;
  font-family: var(--font-display);
  animation-delay: calc(var(--delay-base) + 3 * var(--delay-added));
}

figcaption span:nth-of-type(4){
  bottom: -50px; right: -21px;
  font-size: 21px;
  animation-delay: calc(var(--delay-base) + 4 * var(--delay-added)); 
}

@media screen and (max-width: 539px){
  figure{
    max-width: var(--fig-width);
    max-height: var(--fig-height);
    width: auto;
    height: auto;
  }

  figcaption span:nth-of-type(1),
  figcaption span:nth-of-type(4){
    font-size: 14px;
  }

  figcaption span:nth-of-type(2),
  figcaption span:nth-of-type(3){
    font-size: 70px;
  }

  figcaption span:nth-of-type(4){
    bottom: -44px;
  }
}

Find It On CodeSandBox :-

https://codesandbox.io/embed/figcaption-html-0twsl?fontsize=14&hidenavigation=1&theme=dark
HTML5CSS3Web Development