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')
      }
    });
  });
}
toggle switch style01

toggle switch style01

texte animate css

texte animate css

Timeline style02

Timeline style02

Manual Slideshow

Manual Slideshow

Login Bootstrap3

Login Bootstrap3

Image hover style border top

Image hover style border top

Geocoded Locations

Geocoded Locations

Form login b4 01

Form login b4 01

Créer une input search animée

Créer une input search animée

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Arrows Defense Game

Arrows Defense Game