CSS3图像裁剪适配以及悬停放大效果

Image cropped with hover zoom effect

css3, hover, image, crop

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Raleway:300,400");
* {
    margin: 0;
    padding: 0;
}
body {
    height: 100vh;
    background: #84e8dc;
    background: -moz-linear-gradient(-45deg, #84e8dc 0%, #f4ed8b 100%);
    background: -webkit-linear-gradient(-45deg, #84e8dc 0%, #f4ed8b 100%);
    background: linear-gradient(135deg, #84e8dc 0%, #f4ed8b 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#84e8dc', endColorstr='#f4ed8b', GradientType=1);
}
.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    padding: 0 30px;
    margin-top: 80px;
}
.container .thumbex {
    margin: 10px 20px 30px;
    width: 100%;
    min-width: 250px;
    max-width: 435px;
    height: 300px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    outline: 2px solid white;
    outline-offset: -15px;
    background-color: blue;
    box-shadow: 5px 10px 40px 5px rgba(0, 0, 0, 0.5);
}
.container .thumbex .thumbnail {
    overflow: hidden;
    min-width: 250px;
    height: 300px;
    position: relative;
    opacity: 0.88;
    backface-visibility: hidden;
    transition: all 0.4s ease-out;
}
.container .thumbex .thumbnail img {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    height: 115%;
    width: auto;
    transform: translate(-50%, -50%);
    backface-visibility: hidden;
}
.container .thumbex .thumbnail span {
    position: absolute;
    z-index: 2;
    top: calc(150px - 20px);
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px 50px;
    margin: 0 45px;
    text-align: center;
    font-size: 24px;
    color: white;
    font-weight: 300;
    font-family: "Raleway", sans-serif;
    letter-spacing: 0.2px;
    transition: all 0.3s ease-out;
}
.container .thumbex .thumbnail:hover {
    backface-visibility: hidden;
    transform: scale(1.15, 1.15);
    opacity: 1;
}
.container .thumbex .thumbnail:hover span {
    opacity: 0;
}

HTML

Image cropped with hover zoom effect

css3, hover, image, crop

编辑器支持Emmet

快捷键

Image cropped with hover zoom effect

css3, hover, image, crop

12个使用CSS自定义属性实现的图像悬停效果

CSS3+SVG 图片悬停时圆形轮廓线关闭效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：