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')
      }
    });
  });
}
login page green one

login page green one

input file récupérer le nom du fichier

input file récupérer le nom du fichier

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Scroll to div ID

Scroll to div ID

Nav Menu style02

Nav Menu style02

Input range slider HTML style05

Input range slider HTML style05

Image hover effects style

Image hover effects style

Css Page grid layout

Css Page grid layout

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

Ajouter multiple input dynamique

Ajouter multiple input dynamique