Image hover 06

<!DOCTYPE html>
<html>
<head>
	<title>Image hover | par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Image hover effects style">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<meta name="robots" content="noindex,nofollow">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="style.css" rel="stylesheet" type="text/css">	
</head>
<body>
	<div class="container">
        <div class="row">
            <div class="col-md-4 col-12">
                <a href="#">
                    <figure class="ls-izmir ls-border-bottom-left ls-image-rotate-right ls-gradient-bottom-right" tabindex="0" style="--primary-color: #00c6ff; --secondary-color: #0072ff; --image-opacity: .1;  --border-margin: 30px;--padding: 20px;">
                        <img src="https://source.unsplash.com/random/" alt="sample119">
                        <figcaption class="ls-layout-bottom-left">
                            <div class="ls-reveal-right ls-delay-100">
                                <h4>
                                    Article One
                                </h4>
                            </div>
                        </figcaption>
                    </figure>
                </a>
            </div>
            <div class="col-md-4 col-12">
                <a href="#">
                    <figure class="ls-izmir ls-border-bottom-left ls-image-rotate-right ls-gradient-bottom-right" tabindex="0" style="--primary-color: #f12711; --secondary-color: #f5af19; --image-opacity: .1;  --border-margin: 30px;--padding: 20px;">
                        <img src="https://source.unsplash.com/random/" alt="sample119">
                        <figcaption class="ls-layout-bottom-left">
                            <div class="ls-reveal-right ls-delay-100">
                                <h4>
                                    Article One
                                </h4>
                            </div>
                        </figcaption>
                    </figure>
                </a>
            </div>
            <div class="col-md-4 col-12">
                <a href="#">
                    <figure class="ls-izmir ls-border-bottom-left ls-image-rotate-right ls-gradient-bottom-right" tabindex="0" style="--primary-color: #7303c0; --secondary-color: #ec38bc; --image-opacity: .1;  --border-margin: 30px;--padding: 20px;">
                        <img src="https://source.unsplash.com/random/" alt="sample119">
                        <figcaption class="ls-layout-bottom-left">
                            <div class="ls-reveal-right ls-delay-100">
                                <h4>
                                    Article One
                                </h4>
                            </div>
                        </figcaption>
                    </figure>
                </a>
            </div>
            <div class="col-md-4 col-12">
                <a href="#">
                    <figure class="ls-izmir ls-border-bottom-left ls-image-rotate-right ls-gradient-bottom-right" tabindex="0" style="--primary-color: #00c6ff; --secondary-color: #0072ff; --image-opacity: .1;  --border-margin: 30px;--padding: 20px;">
                        <img src="https://source.unsplash.com/random/" alt="sample119">
                        <figcaption class="ls-layout-bottom-left">
                            <div class="ls-reveal-right ls-delay-100">
                                <h4>
                                    Article One
                                </h4>
                            </div>
                        </figcaption>
                    </figure>
                </a>
            </div>
            <div class="col-md-4 col-12">
                <a href="#">
                    <figure class="ls-izmir ls-border-bottom-left ls-image-rotate-right ls-gradient-bottom-right" tabindex="0" style="--primary-color: #f12711; --secondary-color: #f5af19; --image-opacity: .1;  --border-margin: 30px;--padding: 20px;">
                        <img src="https://source.unsplash.com/random/" alt="sample119">
                        <figcaption class="ls-layout-bottom-left">
                            <div class="ls-reveal-right ls-delay-100">
                                <h4>
                                    Article One
                                </h4>
                            </div>
                        </figcaption>
                    </figure>
                </a>
            </div>
            <div class="col-md-4 col-12">
                <a href="#">
                    <figure class="ls-izmir ls-border-bottom-left ls-image-rotate-right ls-gradient-bottom-right" tabindex="0" style="--primary-color: #7303c0; --secondary-color: #ec38bc; --image-opacity: .1;  --border-margin: 30px;--padding: 20px;">
                        <img src="https://source.unsplash.com/random/" alt="sample119">
                        <figcaption class="ls-layout-bottom-left">
                            <div class="ls-reveal-right ls-delay-100">
                                <h4>
                                    Article One
                                </h4>
                            </div>
                        </figcaption>
                    </figure>
                </a>
            </div>
        </div>
    </div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+HK:300,400,700&display=swap');
html {
height: 100%;}
/*! CSS Used from demo.css */
 body{
    background-color:#212121;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-flow:wrap;
    margin:0;
    height:100%;
    font-family:'Noto Sans HK', sans-serif;
    font-weight:300;
}
 .wrapper{
    width:100%;
    max-width:1080px;
}
 .examples{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
 .examples > *{
    margin:8px;
    max-width:330px;
}
 h4{
    font-size:1.4em;
}
 a{
    color:#059BC6;
}
 .text{
    color:#fff;
    text-align:center;
    margin-bottom:30px;
}
 .text h2{
    font-weight:300;
    font-size:2em;
    text-transform:capitalize;
}
 .text h3{
    font-weight:300;
    font-size:1.3em;
}
 .text strong{
    font-weight:700;
    color:#059BC6;
}
/*! CSS Used from izmir.css */
 .ls-izmir{
    --text-color:#ffffff;
    --primary-color:#00B4DB;
    --secondary-color:#0083B0;
    --padding:1em;
    --transition-duration:600ms;
    --border-margin:15px;
    --border-width:3px;
    --border-color:#ffffff;
    --border-radius:3px;
    --image-opacity:0.25;
    display:inline-flex;
    position:relative;
    box-sizing:border-box;
    overflow:hidden;
    margin:0;
    padding:0;
    color:#ffffff;
    color:var(--text-color);
    border-radius:3px;
    border-radius:var(--border-radius);
}
 .ls-izmir:before,.ls-izmir:after,.ls-izmir *,.ls-izmir *:before,.ls-izmir *:after{
    box-sizing:border-box;
    transition:all 600ms ease;
    transition:all var(--transition-duration) ease;
}
 .ls-izmir figcaption{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:1em;
    padding:var(--padding);
    width:100%;
    z-index:1;
}
 .ls-izmir img{
    object-fit:cover;
    max-width:100%;
    width:100%;
    height:100%;
}
 .ls-izmir h4{
    margin-top:0;
    color:#ffffff;
    color:var(--text-color);
}
 .ls-izmir h4:last-child{
    margin-bottom:0;
}
 [class*=' ls-border']:before,[class*=' ls-border']:after,[class*=' ls-border'] figcaption:before,[class*=' ls-border'] figcaption:after{
    background-color:#ffffff;
    background-color:var(--border-color);
    position:absolute;
    content:'';
}
 [class*=' ls-border']:before,[class*=' ls-border']:after{
    z-index:1;
    height:3px;
    height:var(--border-width);
    left:15px;
    left:var(--border-margin);
    right:15px;
    right:var(--border-margin);
    transform:scaleX(0);
}
 [class*=' ls-border']:before{
    top:15px;
    top:var(--border-margin);
}
 [class*=' ls-border']:after{
    bottom:15px;
    bottom:var(--border-margin);
}
 [class*=' ls-border'] figcaption{
    z-index:3;
}
 [class*=' ls-border'] figcaption:before,[class*=' ls-border'] figcaption:after{
    z-index:-1;
    width:3px;
    width:var(--border-width);
    top:15px;
    top:var(--border-margin);
    bottom:15px;
    bottom:var(--border-margin);
    transform:scaleY(0);
}
 [class*=' ls-border'] figcaption:before{
    left:15px;
    left:var(--border-margin);
}
 [class*=' ls-border'] figcaption:after{
    right:15px;
    right:var(--border-margin);
}
 [class*=' ls-border'].hover:before,[class*=' ls-border'].hover:after,[class*=' ls-border'].hover figcaption:before,[class*=' ls-border'].hover figcaption:after,[class*=' ls-border']:hover:before,[class*=' ls-border']:hover:after,[class*=' ls-border']:hover figcaption:before,[class*=' ls-border']:hover figcaption:after,[class*=' ls-border']:focus:before,[class*=' ls-border']:focus:after,[class*=' ls-border']:focus figcaption:before,[class*=' ls-border']:focus figcaption:after,:focus > [class*=' ls-border']:before,:focus > [class*=' ls-border']:after,:focus > [class*=' ls-border'] figcaption:before,:focus > [class*=' ls-border'] figcaption:after{
    transform:scale(1);
}
 .ls-border-bottom-left:before,.ls-border-bottom-left:after,.ls-border-bottom-left figcaption:before,.ls-border-bottom-left figcaption:after{
    transform-origin:0 100%;
}
 .ls-border-bottom-left:before{
    transition-delay:0s;
}
 .ls-border-bottom-left:after{
    transition-delay:480ms;
    transition-delay:calc(var(--transition-duration) / 1.25);
}
 .ls-border-bottom-left figcaption:before{
    transition-delay:480ms;
    transition-delay:calc(var(--transition-duration) / 1.25);
}
 .ls-border-bottom-left figcaption:after{
    transition-delay:0s;
}
 .ls-border-bottom-left.hover:before,.ls-border-bottom-left:hover:before,.ls-border-bottom-left:focus:before,:focus > .ls-border-bottom-left:before{
    transition-delay:480ms;
    transition-delay:calc(var(--transition-duration) / 1.25);
}
 .ls-border-bottom-left.hover:after,.ls-border-bottom-left:hover:after,.ls-border-bottom-left:focus:after,:focus > .ls-border-bottom-left:after{
    transition-delay:0s;
}
 .ls-border-bottom-left.hover figcaption:before,.ls-border-bottom-left:hover figcaption:before,.ls-border-bottom-left:focus figcaption:before,:focus > .ls-border-bottom-left figcaption:before{
    transition-delay:0s;
}
 .ls-border-bottom-left.hover figcaption:after,.ls-border-bottom-left:hover figcaption:after,.ls-border-bottom-left:focus figcaption:after,:focus > .ls-border-bottom-left figcaption:after{
    transition-delay:480ms;
    transition-delay:calc(var(--transition-duration) / 1.25);
}
 .ls-image-rotate-right img{
    transform:scale(1.1) translate(0, 0);
}
 .ls-image-rotate-right.hover img,.ls-image-rotate-right:hover img,.ls-image-rotate-right:focus img,:focus > .ls-image-rotate-right img{
    transform:scale(1.3) rotate(15deg);
}
 .ls-delay-100,.ls-delay-100 > *{
    transition-delay:100ms;
}
 [class^='ls-reveal']{
    display:inline-block;
}
 [class^='ls-reveal'] > *{
    display:inline-block;
}
 [class^='ls-reveal'] > *:last-child{
    margin-bottom:0;
}
 [class^='ls-reveal']{
    overflow:hidden;
    opacity:1;
}
 .ls-izmir.hover [class^='ls-reveal'],.ls-izmir:hover [class^='ls-reveal'],.ls-izmir:focus [class^='ls-reveal'],:focus > .ls-izmir [class^='ls-reveal']{
    opacity:1;
}
 .ls-izmir.hover [class^='ls-reveal'] > *,.ls-izmir:hover [class^='ls-reveal'] > *,.ls-izmir:focus [class^='ls-reveal'] > *,:focus > .ls-izmir [class^='ls-reveal'] > *{
    transform:translate(0) rotate(0deg);
}
 .ls-reveal-right > *{
    transform:translateX(-100%);
}
 .ls-gradient-bottom-right{
    background-image:linear-gradient(315deg, #00B4DB 0%, #0083B0 100%);
    background-image:linear-gradient(315deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}
 .ls-izmir .ls-layout-bottom-left{
    justify-content:flex-end;
    align-items:flex-start;
    text-align:left;
}
 .ls-izmir{
    background-color:#00B4DB;
    background-color:var(--primary-color);
}
 .ls-izmir figcaption{
    padding:2em;
    padding:calc(var(--padding) * 2);
}
 .ls-izmir figcaption > *{
    opacity:0;
}
 .ls-izmir.hover > img,.ls-izmir:hover > img,.ls-izmir:focus > img,:focus > .ls-izmir > img{
    opacity:0.25;
    opacity:var(--image-opacity);
}
 .ls-izmir.hover figcaption > *,.ls-izmir:hover figcaption > *,.ls-izmir:focus figcaption > *,:focus > .ls-izmir figcaption > *{
    opacity:1;
}
/* Demo purposes only */
var snippet = [].slice.call(document.querySelectorAll('.hover'));
if (snippet.length) {
  snippet.forEach(function (snippet) {
    snippet.addEventListener('mouseout', function (event) {
      if (event.target.parentNode.tagName === 'figure') {
        event.target.parentNode.classList.remove('hover')
      } else {
        event.target.parentNode.classList.remove('hover')
      }
    });
  });
}
Vidéo background en html5 style02

Vidéo background en html5 style02

Transitions Animations SVG Style01

Transitions Animations SVG Style01

Timeline style08

Timeline style08

Timeline style06

Timeline style06

Scroll down button 01

Scroll down button 01

Loading style book loader

Loading style book loader

Input range slider HTML style03

Input range slider HTML style03

Form login 03

Form login 03

Form Création de compte style animée

Form Création de compte style animée

ChartJS style01

ChartJS style01

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Background div gradient

Background div gradient