CSS3 悬停时跳出半透明内容遮层的图卡UI模板

Image Quick Info Card Concept Pop Up Overlay（斜三角浮层效果）

CSS3, template

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3145
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import "https://fonts.googleapis.com/css?family=Ubuntu";
*:not(img) {
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
}
#wrapper {
    width: 100vw;
    min-height: 100vh;
    background: rgba(245, 245, 245, 0.8);
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
#wrapper h1 {
    text-align: Center;
    font-family: 'Ubuntu';
    padding: 20px;
    font-size: 36px;
    color: black;
    text-shadow: 1px 1px 2px black;
    font-weight: 700;
    width: 100vw;
    text-transform: uppercase;
}
#wrapper .img {
    width: 700px;
    height: 500px;
    position: relative;
    background-size: Cover;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    -webkit-filter: brightness(120%);
    margin: 10px;
}
#wrapper .img .topSlide {
    background: rgba(236, 240, 241, 0.75);
    width: 700px;
    height: 300px;
    transform: rotate(-15deg);
    position: absolute;
    right: -10%;
    top: -100%;
    transition: all 0.3s cubic-bezier(0.8, -0.3, 0.2, 1);
    z-index: 2;
}
#wrapper .img .topSlide .topInfo {
    width: auto;
    height: 100px;
    position: absolute;
    bottom: 10%;
    left: 10%;
    transform: rotate(15deg);
    font-size: 35px;
    font-family: 'Ubuntu';
    color: black;
    text-shadow: 0 1px 0 #2c3e50, 0 2px 0 #2c3e50;
}
#wrapper .img .rightSlide {
    background: rgba(52, 152, 219, 0.75);
    width: 700px;
    height: 500px;
    transform: rotate(-15deg);
    position: absolute;
    right: -120%;
    bottom: -21.5%;
    transition: all 0.4s cubic-bezier(0.8, -0.3, 0.2, 1);
    z-index: 2;
}
#wrapper .img .rightSlide .rightInfo {
    width: 50%;
    height: 100px;
    position: absolute;
    top: 12%;
    left: 12%;
    transform: rotate(15deg);
    font-size: 16px;
    line-height: 25px;
    font-family: 'Ubuntu';
    color: White;
}
#wrapper .img .leftSlide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(52, 73, 94, 0.35);
    opacity: 0;
    transition: all .65s ease;
    z-index: 1;
}
#wrapper .img .leftSlide #donate {
    position: Absolute;
    bottom: -10%;
    left: 10%;
    height: 100px;
    width: 150px;
    transition: all 0.3s cubic-bezier(0.8, -0.3, 0.2, 1);
}
#wrapper .img .leftSlide #donate:hover {
    bottom: 0;
}
#wrapper .img .leftSlide #donate:hover > .uparrow {
    transform: translate(-50%, 0) rotate(-135deg);
}
#wrapper .img .leftSlide #donate .uparrow {
    width: 25px;
    height: 25px;
    border-top: 5px solid rgba(236, 240, 241, 0.8);
    border-left: 5px solid rgba(236, 240, 241, 0.8);
    border-radius: 5px;
    position: Absolute;
    top: 12%;
    left: 50%;
    transform: translate(-50%, 0) rotate(45deg);
    transition: all 0.75s cubic-bezier(0.8, -0.3, 0.2, 1);
}
#wrapper .img .leftSlide #donate a {
    position: absolute;
    bottom: 10%;
    min-width: 125px;
    height: 25px;
    background: #c0392b;
    left: 50%;
    padding: 0 5px 0 5px;
    transform: translate(-50%, 0);
    text-align: center;
    text-decoration: none;
    line-height: 25px;
    font-size: 12px;
    font-family: "Ubuntu";
    text-transform: uppercase;
    box-shadow: 0 3px 0 #e74c3c;
    color: #ecf0f1;
}
#wrapper .img .leftSlide #donate a:active {
    box-shadow: none;
    bottom: 9%;
}
#wrapper .img .leftSlide .logo {
    width: 75px;
    height: 75px;
    position: absolute;
    Bottom: -1.5%;
    left: -1.5%;
    opacity: .75;
}
.movetop {
    right: -10% !important;
    top: -30% !important;
}
.moveright {
    right: -40% !important;
    bottom: -21.5% !important;
}
.moveleft {
    opacity: 1 !important;
}

HTML

Image Quick Info Card Concept Pop Up Overlay（斜三角浮层效果）

CSS3, template

编辑器支持Emmet

快捷键

Image Quick Info Card Concept Pop Up Overlay（斜三角浮层效果）

CSS3, template

CSS3 暗灰色调的用户档案卡片UI设计模板

HTML5 CSS3沿着对角线遮掩拉开浮层的图片悬停动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：