CSS图像悬停

下载代码

html

css

分享到微信朋友圈

html

<div class="wrapper">
	<div class="text">
		<h2><strong>Izmir</strong><span style="opacity: .6"> - ImageHover CSS Library Examples</span></h2>
	</div>
	<div class="examples">
		<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://picsum.photos/id/270/330/240" alt="sample119">
				<figcaption class="ls-layout-bottom-left">
					<div class="ls-reveal-right ls-delay-100">
						<h4>
							Easy to Use
						</h4>
					</div>
				</figcaption>
			</figure>
		</a>
		<a href="#">
			<figure class="ls-izmir ls-border-bottom-left ls-image-rotate-right ls-gradient-bottom-right hover" tabindex="0" style="--primary-color: #f12711; --secondary-color: #f5af19; --image-opacity: .1;  --border-margin: 30px;--padding: 20px;">
				<img src="https://picsum.photos/id/271/330/240" alt="sample120">
				<figcaption class="ls-layout-bottom-left">
					<div class="ls-reveal-right ls-delay-100">
						<h4>
							Creative Control
						</h4>
					</div>
				</figcaption>
			</figure>
		</a>
		<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://picsum.photos/id/273/330/240" alt="sample87">
				<figcaption class="ls-layout-bottom-left">
					<div class="ls-reveal-right ls-delay-100">
						<h4>
							Endless Possibilities
						</h4>
					</div>
				</figcaption>
			</figure>
		</a>
	</div>
</div>

css

@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;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg