图片与文字组合的立体效果css怎么实现
如上图所示的效果
html代码
<h1>Amber Heard</h1>
<img src="https://s-media-cache-ak0.pinimg.com/736x/06/d1/5f/06d15fc8a69e2ab67143e5357a4184d7.jpg" />
<div class="glow-wrap"></div>
<a id="author" href="http://tiagoalexandrelopes.com/" target="_blank" rel="noopener">About me</a>
CSS代码
.snip1325 {
position: relative;
overflow: hidden;
margin: 10px;
min-width: 255px;
max-width: 315px;
height: 220px;
width: 100%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.snip1325 img {
height: 100%;
position: absolute;
right: 0;
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
}
.snip1325:hover img,
.snip1325.hover img {
-webkit-transform: translateX(130px);
transform: translateX(130px);
}
/* Demo purposes only */
body {
background-color: #212121;
}
JS代码
/* Demo purposes only */
$(".hover").mouseleave(
function () {
$(this).removeClass("hover");
}
);
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/courses/261511.html