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')
      }
    });
  });
}
texte animate css

texte animate css

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Scroll down button 01

Scroll down button 01

Nav Menu style02

Nav Menu style02

Input range slider HTML style02

Input range slider HTML style02

Form login 03

Form login 03

Form login 02

Form login 02

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Chercher un mot sur la liste

Chercher un mot sur la liste

Ajouter multiple input dynamique

Ajouter multiple input dynamique

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery